中文

SyCms建站第一讲:制作简单的列表页

添加时间:2012-09-12
  • 下面我们大家一起来作一个简单的列表页的模板,列表页的样子如下所示。

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 2

    我们通过这个可以看出,以下几个要实现的功能:1.头部:要显示出网站的栏目(一级栏目),并且当前一级栏目要不一样的样式。2.左侧:并且显示出当前一级栏目的二级栏目,当前二级栏目也要不一样的样式。3.右侧:显示使用了此模板的栏目内的内容列表,(要求有分页显示)4.底部:显示一些简单的版权信息。在我们制作模板之前,我们要先作一些准备工作,因为栏目还没有建立,内容也没有录入,当然如果你已经建立了栏目录入了内容,请跳过此步骤。我们的栏目结构如下:首页新闻中心-公司动态-行业动态联系我们我们就建立这么简单的栏目结构吧。我们单击“内容-栏目管理-管理栏目”中的“快速添加栏目”。

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 3

    出现如下图所示:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 4

    我们把栏目结构复制进去,如图:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 5

    模型我们就绑定系统自带的“新闻”模型就可以了。单击“确定”,如图所示,我们的栏目结构就建立成功了。

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 6

    我们先给“公司动态”随便添加一些内容,添加大约10来条吧,如果要分布效果的时候,我们就5页一分就可以了,一会我们就“公司动态”作列表页模板。

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 7

    这样我们的前期准备工作就算完成了。下面我们来制作模板。单击“模板-模板管理-模板管理”,单击按钮“添加模板组”,如下图:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 8

    我们为我们的模板放到一个组里面,为什么要放到组里面,因为我们以后可能有多套模板组来实现不同的布局样式功能,这样我们也好去管理。我们为模板组起一个模板组名称“测试”。模板组路径:这个是作什么用的呢?我们的模板图片,样式都要调用,所以取一个跟模板组相近的名字“cs”。单击“确定”。

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 9

    如下图所示,我们的模板组就建立好了。

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 10

    那为我们的模板组上传它需要的基本信息,如图片、JS文件、样式文件呀等等。我们单击测试这一行后面的,“文件图片”,出现如下图所示界面。

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 11

    现在这里面显示的就是我们建立的模板组路径“cs”里的目录结构情况,如果没有我们想要的目录名,我们可以建立,在此我就不一一讲解了,里面的目录情况可以根据我们模板的目录情况建立即可,(需要注意一点,此时上传文件,要选择上传原文件名,要不就对应不起来了),最终显示如下:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 12

    前期的准备工作已经完成了,这时候我们就要作我们的模板了。单击“测试”,进入模板组管理下的模板管理。如下图所示:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 13

    让我们单击一下“添加模板”,出现如下界面:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 14

    我们取一个模板名称,如“列表页”。为什么不叫“公司动态列表页”呢?原因是这样的。如果我们这个网站只有这一种显示样式的列表页,希望这个模板在行业动态使用的时候。也能够正常显示。所以,我们就取名“列表页”。单击“确定”之后如下显示:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 15

    我们单击“列表页”进入模板编辑界面,如下图所示:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 16

    把我们列表页的源代码复制到此大的录入框内。注:此时我们要作一件事件,什么事情呢?就是,大家可以发现,这上面有一个按钮叫“单击查看效果”,那能够直接查看效果了?可转念一想,不对呀,我们是通用的模板。不知道谁使用了这个模板?怎么能够看到实际显示效果呢?我们现在就让这个按钮能够简单的查看到前台显示的实际效果。把内容复制进去之后保存。我们在“列表页”这一行上单击右键。如图所示:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 17

    单击“可视化参数”,出现如下图所示界面:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 18

    因为我们是要作栏目的显示列表模板,所以我们指定一个已经有内容的栏目ID,给它就行了。所以我们把“公司动态”的栏目ID,给它。此ID在那看到呢?就在如下界面的这个位置就是栏目的ID

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 19

    所以我们把3给它。确定即可。这样一来。我们在如下界面:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 20

    编辑标签,模板的时候。就可以直接使用“单击查看效果”功能了。话题有点远了,我们再重新回来呀,现在我们编辑我们的列表页模板,上面已经说过了。功能分为4大块,我们一块一块的完成。制作前准备,因为模板生成的地方不一定是几级目录下面,如/news/list/这样的。所以里面的图片、样式、JS引用的地址都不正确,所以我们根据窗口上面的提示,把他们替换了,如下图所示:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 21

    第1块功能:头部我们选中头部代码(我们要把头部代码作成公用的,所以我们也把logo一块包含进去),之后单击右键,选择“新建区块”,如下图:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 22

    我们给区块起一个能够记住并且含义的名字:“头部”。

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 23

    我们现在就对要显示的栏目进行调用,我们可以看出,在上面的界面中,其实就是一直在div里面循环显示a标签,只是有一个是当前栏目有一个样式而已。那我们把光标放到

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 24

    我们先看看,系统提供的常用标签里有没有我们想要的功能。打开常用标签:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 25

    我们看到在“常用标签”的第一个,调用所有导航显示为1的一级栏目。我们使用它就能够显示出当前网站所有的导航显示为1的一级栏目了,我们选择它,选择之后如下图所示:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 26

    这时候,我们要单击开它,看看它的显示和条件等是不是我们想要的。打开方式有三种:1.双击选中的代码。2.右键:选择“修改标签语句”3.单击右键的,相应亮块。打开之后如下图所示:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 27

    我们看到,这里面的直接输出,比我们的多了一些代码,我们直接把多余的删除即可,但有一个问题是,我们这样显示的跟前面有一点小区别是什么呢?之前我们的源代码里有一个A是有样式的“class="one"”,是当前样式的意思。这个没有。那如何添加呢?这个我们可以这样理解一下,我要显示栏目,肯定是一个一个这样读取出来的,当前的不同,肯定是一个一个读的时候读取了是当前的就输出一个当前的样式,那应该是用判断,如何判断呢?我们单击一下,看看系统有没有提供常用的判断语句,右键如图:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 28

    因为是给A添加判断,所以要在A的开始标签结束之前单击,这样加入的位置才是正常的。当然加错地方可以复制到正确的位置,打开“常用语句”如下图:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 29

    系统还真提供了一个判断当前栏目是否一级的判断语句,我们选择它,如下图所示:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 此时会比我们上面的多了一个IF语句,我们看看里面的判断是什么样子的。

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 原来是对比值:是使用的当前模型下的栏目ID值。和一个系统变量(如何知道?双击即可打开看到)取得的1级栏目ID作“等于”的对比。成立的时候。就显示则里面的,简单,我们把“样式名”改成我们的“one”,确定就可以了。之后标签那“确定”,区块“确定”。这样我们的第一个区块“头部”就算完成了。注:标签深层的讲解将在后面的例子中用到时讲解,当然也会有一个详细的标签讲解。之后如下图所示:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 我们的源代码里的头部html代码就替换成了我们模板里的一个区块“头部”了。我们可以单击如下图:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 红色标示地方的图标,查看一下此区块显示的样子。

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 看来是显示出来的,只是没有样式,如果想看详细点的,单击窗体上面的“单击查看效果”按钮,如下图所示:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 正好是我们想要的效果。第2块功能:左侧二级导航此作法跟一级导航差不多,在此我们讲解的快一些。

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 我们一并让它显示出来吧。单击右键,选择如下图所示:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 出现如下界面。

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 在数据模型时,我们选择“栏目”,因为要显示栏目的名称。在条件设置:我们选择成如下:

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1
  • 单击“确定”把条件添加上去。注:也就是说,此时的条件为,栏目ID,等于“绑定了此模板的那个栏目ID”,这样就能显示出,哪个栏目用了这个模板就显示那个栏目的名称。其它的不需要设置,只需要在最后“直接输出”把栏目名称输出即可。最终为:

     

     

     

    使用SyCms搭建网站第一讲:制作简单的列表页-1