使用SyCms搭建网站第一讲制作简单的列表页
- 格式：pdf
- 大小：1.58 MB
- 文档页数：28
下面我们大家一起来作一个简单的列表页的模板，列表页的样子如下所示。
我们通过这个可以看出，以下几个要实现的功能： 1.头部：要显示出网站的栏
目（一级栏目），并且当前一级栏目要不一样的样式。 2.左侧：并且显示出当
前一级栏目的二级栏目，当前二级栏目也要不一样的样式。 3.右侧：显示使用
了此模板的栏目内的内容列表，（要求有分页显示） 4.底部：显示一些简单的
版权信息。 在我们制作模板之前，我们要先作一些准备工作，因为栏目还没有
建立，内容也没有录入，当然如果你已经建立了栏目录入了内容，请跳过此步骤。
我们的栏目结构如下： 首页 新闻中心 -公司动态 -行业动态 联系我们 我们
就建立这么简单的栏目结构吧。 我们单击“内容-栏目管理-管理栏目”中的“快
速添加栏目”。
出现如下图所示：
我们把栏目结构复制进去，如图：
模型我们就绑定系统自带的“新闻”模型就可以了。 单击“确定”，如图所示，
我们的栏目结构就建立成功了。
我们先给“公司动态”随便添加一些内容，添加大约10来条吧，如果要分布效
果的时候，我们就5页一分就可以了，一会我们就“公司动态”作列表页模板。
这样我们的前期准备工作就算完成了。 下面我们来制作模板。 单击“模板-模
板管理-模板管理”，单击按钮“添加模板组”，如下图： 我们为我们的模板放到一
个组里面，为什么要放到组里面，因为我们以后可能有多套模板组来实现不同的
布局样式功能，这样我们也好去管理。 我们为模板组起一个模板组名称“测试”。
模板组路径：这个是作什么用的呢？我们的模板图片，样式都要调用，所以取
一个跟模板组相近的名字“cs”。 单击“确定”。 如下图所示，我们的模板组
就建立好了。
那为我们的模板组上传它需要的基本信息，如图片、JS文件、
样式文件呀等等。 我们单击测试这一行后面的，“文件图片”，出现如下图所示界面。
现在这里面显示的就是我们建立的模板组路径“cs”里的目录结构情况，如果没
有我们想要的目录名，我们可以建立，在此我就不一一讲解了，里面的目录情况
可以根据我们模板的目录情况建立即可，（需要注意一点，此时上传文件，要选
择上传原文件名，要不就对应不起来了），最终显示如下：
前期的准备工作已经完成了，这时候我们就要作我们的模板了。 单击“测试”，
进入模板组管理下的模板管理。如下图所示：
让我们单击一下“添加模板”，出现如下界面：
我们
取一个模板名称，如“列表页”。为什么不叫“公司动态列表页”呢？原因是这
样的。如果我们这个网站只有这一种显示样式的列表页，希望这个模板在行业动
态使用的时候。也能够正常显示。所以，我们就取名“列表页”。 单击“确定”
之后如下显示：
我们单击“列表页”进入模板编辑界面，如下图所示：
把我们列表页的源代码复制到此大的录入框内。 注：此时我们要作一件事件，
什么事情呢？就是，大家可以发现，这上面有一个按钮叫“单击查看效果”，那
能够直接查看效果了？可转念一想，不对呀，我们是通用的模板。不知道谁使用
了这个模板？怎么能够看到实际显示效果呢？我们现在就让这个按钮能够简单
的查看到前台显示的实际效果。 把内容复制进去之后保存。我们在“列表页”
这一行上单击右键。如图所示：
单击“可视化参数”，出
现如下图所示界面：
因为
我们是要作栏目的显示列表模板，所以我们指定一个已经有内容的栏目ID，给
它就行了。所以我们把“公司动态”的栏目ID，给它。此ID在那看到呢？就在
如下界面的这个位置就是栏目的ID。
所以我们把3给它。确定即可。 这样一来。我们在如下界面：
编辑标签，模板的时候。就可以直接使用“单击查看效果”功能了。 话题有点
远了，我们再重新回来呀，现在我们编辑我们的列表页模板， 上面已经说过了。
功能分为4大块，我们一块一块的完成。 制作前准备，因为模板生成的地方不
一定是几级目录下面，如/news/list/这样的。所以里面的图片、样式、JS引用
的地址都不正确，所以我们根据窗口上面的提示，把他们替换了，如下图所示：
第1块功能：头部 我们选中头部代码（我们要把头部代码作成公用的，所以我
们也把logo一块包含进去），之后单击右键，选择“新建区块”，如下图：
我们给区块起一个能够记住并且含义的名字：“头部”。 我们现在就对要显示
的栏目进行调用，我们可以看出，在上面的界面中，其实就是一直在div里面循
环显示a标签，只是有一个是当前栏目有一个样式而已。那我们把光标放到
v class="nav"> 后面，单击右键。选择如下图所示：
我们先看看，系统
提供的常用标签里有没有我们想要的功能。打开常用标签：
我
们看到在“常用标签”的第一个，调用所有导航显示为1的一级栏目。我们使用
它就能够显示出当前网站所有的导航显示为1的一级栏目了，我们选择它，选择
之后如下图所示：
这时候，我们要单击开它，看看它的显示和条件等是不是我们想要的。 打开方
式有三种： 1.双击选中的代码。 2.右键：选择“修改标签语句” 3.单击右键
的，相应亮块。 打开之后如下图所示：
我们看到，这里面的直接输出，比我们的多了一些代码，我们直接把多余的删除
即可，但有一个问题是，我们这样显示的跟前面有一点小区别是什么呢？之前我
们的源代码里有一个A
是有样式的“class="one"”，是当前样式的意思。这个没有。那如何添加呢？ 这个我们可以这样理解一下，我要显示栏目，肯定是一
个一个这样读取出来的，当前的不同，肯定是一个一个读的时候读取了是当前的
就输出一个当前的样式，那应该是用判断，如何判断呢？我们单击一下，看看系
统有没有提供常用的判断语句，右键如图：
因为是给A添加判断，所以要在A的开始标签结束之前单击，这样加入的位置才
是正常的。当然加错地方可以复制到正确的位置，打开“常用语句”如下图：
系统
还真提供了一个判断当前栏目是否一级的判断语句，我们选择它，如下图所示： 此时会比我们上面的多了一个IF语句，我们看看里面的判断是什么样子的。
原来是对比值：是使用的当前模型下的栏目ID值。 和一个系统变量（如何知道？
双击即可打开看到）取得的1级栏目ID作“等于”的对比。成立的时候。就显
示则里面的，简单，我们把“样式名”改成我们的“one”,确定就可以了。 之
后标签那“确定”，区块“确定”。这样我们的第一个区块“头部”就算完成了。
注：标签深层的讲解将在后面的例子中用到时讲解，当然也会有一个详细的标
签讲解。 之后 如下图所示： 我们的源代码里的头部html代码就替换成了我们模板里的一个区块“头部”了。
我们可以单击如下图：
红色标示地方的图标，查看一下此区块显示的样子。
看来是显示出来的，只是没有样式，如果想看详细点的，单击窗体上面的“单击
查看效果”按钮，如下图所示：
正好是我们想要的效果。 第2块功能：左侧二级导航 此作法跟一级导航差不多，
在此我们讲解的快一些。
我们一并让它显示出来吧。 单击右键，选择如下图所示：
出现如下界面。
在数据模型时，我们选择“栏目”，因为要显示栏目的名称。 在条件设置：我
们选择成如下： 单
击“确定”把条件添加上去。 注：也就是说，此时的条件为，栏目ID，等于“绑
定了此模板的那个栏目ID”，这样就能显示出，哪个栏目用了这个模板就显示
那个栏目的名称。 其它的不需要设置，只需要在最后“直接输出”把栏目名称
输出即可。
最终为：
当然我们可以在“标签名称”的地方取一个标签名字“显示当前栏目的名称”，
确定，我们的区块界面就显示成如下图所示：
现在我们要显示二级导航栏目了。也是在常用标签中选择。“显示二级栏目”的
一个标签，选择之后。我们修改标签。
跟我们的对比。也是没有当前，那我们就去“条件标签”里的常用里查找，选择
判断二级栏目当前的。 最终区块显示为：
确定保存区块即可。 再次“单击查看效果”，如下图：
是不是我们的左侧已经出来了。 第3块功能：右侧列表。 选中右侧列表的htm
l代码，因为我们要作分页处理。
如下图：
这时候，我们取区块名称的时候，要取的专业一些，如叫“右侧列表（标题+时
间）”，当然了。只要能够看懂就行了。 我们也是查看一下。有没有直接输出
“新闻”这个模型的，如果没有，对比着修改也是可以的，选中一个要循环显示
的LI代码，如下图： 我们选择数据模型，就是栏目所绑定的模型“新闻”。 在条件设置里，我们选
择。新闻这个模型的“栏目ID”。
也是等于，绑定此模板的栏目ID，这样我们就能得到用这个模板的栏目ID了，
单击“添加”把它设置为条件。 因为我们要分页，所以我们要把排序设置设置
一下，一般情况下， 是使用新闻ID降序，如下图：
这样的时候。就能最新的显示在第一页的
第一位置上。 调用数量：我们设置分页样子和数量等信息，当然要单击分页显
示之后才可以，如下图：
之后我们在直接输出里面，设置成要显示的新闻模型中的字段信息。
这样即可，当然我们也可以去添加时间进行样式设置。我们要显示成“2012-12
-12”这样的格式，我们双击“添加时间”，或者是单击右键。
之后选择，日期型，后面的格式就是我们想要的，不作修改，确定即可。 之后
“常规标签”再次确定。把不需要的li信息删除掉。 我们在ul里面后面单击
右键，选择分页信息-分页位置。
即告诉系统，我们要把分页显示在这个位置上。 注：不选择将看不到分页，少于一年
也没有分页显示。 区块再“确定”，模板界面就显示成这样的样子了。
我们再次单击“单击查看效果”看以下显示的效果情况，如下图所示：
第4块功能：版权信息 因为版权信息是全站统一的，我们直接把它建成一个区
块，方便其它模板调用。
