SiteServer CMS模板嵌套全过程(史上最详细)

** 如果您觉得文章对您有点用,麻烦在您阅读、收藏、转发的时候,顺手帮忙点个赞、留个言、加关注,这是我继续写下去的绝佳动力。**

利用SiteServer CMS 系统建网站的主要工作量就是在于做模板,即所谓的模板嵌套。对于一个刚接触SiteServer CMS 系统的新手来说,最关心的问题莫过于模板是如何嵌套出来的、模板制作过程中需要用到哪些技术、这些技术好不好掌握等问题。今天这篇文章就是来展示SiteServer CMS模板嵌套全过程。

1、开始模板嵌套之前的工作

在开始展示SiteServer CMS模板嵌套全过程之前,以下工作必须自行做完,否则无法开展模板嵌套工作。

  • 安装好了SiteServer CMS系统,如果还没有安装的请根据这篇文章:深入讲解SiteServer CMS:如何安装 把系统安装好。
  • 需要嵌套成模板的静态页面html文件(此部分工作由页面切图人员负责)已经准备好了。
  • 本文演示的模板特别简单,就是一个新闻列表的模板。之所以这样来选择,主要还是为了更清晰地给大家展示模板嵌套的整个过程,而不要被模板里面的细节所干扰。
  • 本文展示的是SiteSever CMS系统安装在本机,通过localhost访问。
  • 之前有发过一篇文章:深入讲解SiteServer CMS:模板嵌套,这里面也讲了一些模板基础知识可以参考。

2、静态页面需求分析

不要被标题吓倒,这里的需求分析指的是对还没有嵌套的静态页面上所有元素的含义需要了解清楚。切图人员给你的是还没有进行模板嵌套的网站静态页面,结构可能是这样子的:


直接用浏览器打开新闻列表静态页面list.html,看到效果如下图:


从上图可以看到,这是一个典型的图文混排的新闻列表页面。在开始对这个页面进行模板嵌套之前需要了解页面上所有元素具体含义(图片中的红色文字就是对每个字段的含义进行了解释),要不然无从下手,或者嵌套出来也可能不符合要求。特别要注意的是一些非具体元素的细节容易忽略掉,比如:第2、4两条记录是有背景颜色的。从这可以推断出偶数行记录需要带背景颜色,这一点在模板嵌套中必须体现出来。

3、创建模板文件

需求分析清楚之后,就可以开始着手模板嵌套工作了。
第一步就是把切图人员给过来的css、images和js文件夹拷备到安装好了的SiteServer CMS系统根目录下,如下图所示:


第二步就是在SiteServer CMS后台创建一个空白的名叫“新闻列表模板”的栏目模板,如下图所示:


第三步就是找到刚才创建的模板文件(模板文件的具体位置规则可以参考这篇文章:深入讲解SiteServer CMS:模板嵌套),如下图所示:

第四步就是用你熟悉的文本编辑器(本人习惯用Atom)打开此空白模板文件,把切图人员提供的list.html代码粘贴到此空白模板文件中,如下图所示:


什么都不用做,直接保存。此时如果用这个栏目模板去匹配任何一个栏目,生成的栏目页面都是一样的,因为这纯粹就是一个不包含任何STL标签,也即不能从数据库中调取任何数据。

4、用STL标签进行模板嵌套

从这开始才算是真正的用STL标签进行模板嵌套。模板嵌套的过程其实就是把之前静态页面中的静态文本替换STL标签的过程。替换成了STL标签,就意味着这个位置的内容是从数据库里读取数据的,从而实现了SiteServer CMS系统后台发布数据存储在数据库中,再通过标签调取显示到网站前台页面上的效果。

首先我们进行栏目名称的STL标签替换,如下图所示:


此时如果用这个栏目模板去匹配不同栏目,生成的栏目页面Title就会不一样了,会显示各自栏目的栏目名称了。接下来进行新闻列表模板嵌套,先分析一下html:


SiteServer CMS系统STL标签中是用<stl:contents>标签来调取内容列表的,所以可以这样进行STL标签替换:


上图所示代码会有一个问题,那就是没有实现第2、4这样的偶数项新闻的背景色问题,所以还需要这样改进一下代码:


解决了偶数项新闻的背景色问题,接下来就是要进行每一篇具体新闻的STL标签替换。为了方便大家对比嵌套前后的差别,特意把替换前后的代码列在一起,用红框框起来了,总共4组,如下图所示:


解释一下第1组:用{Content.ImageUrl}获取新闻的图片,因为图片还需要能点击进到详情页,所以又用了<stl:a>标签获取新闻的链接。

对比会发现,凡是html标签能用的属性,stl标签也一样能用,因为stl标签解析之后生成的就是html代码。所以在这里可以看到链接的属性:target="_blank" 就可以直接复制到stl:a标签中。从这四组代码对比还能发现,stl标签替换的过程就类似填空一样,把原来的部分替换掉即可(当然部分复杂的会有不同)。其他几组就不再解释了,详细的stl标签用法可以参考官方说明:http://stl.siteserver.cn

偶数项的li除了多了 class="bg" 这么一个背景样式之外,里面的元素是完全一样的,所以只需要把奇数项li里的元素拷过来即可,最后给出一个完整的嵌套好了的代码,如下图所示:


5、匹配具体栏目、生成静态页面

模板嵌套完成之后,需要把此模板应用的具体栏目中,就是所谓的模板匹配,如下图所示:


如上图所示,把刚才嵌套好的 “新闻列表模板” 和 “新闻” 栏目匹配好,然后再去生成页面:


生成完成之后,再通过如下图所示点击红框位置文件夹图标,就可进到 “新闻” 栏目对应的前台页面:


看到的前台页面效果和最开始静态页面的布局是一样的,不同的就是每篇新闻的数据,如下图所示:


如果再查看生成出来的这个页面的html代码,和之前切图人员提供给我们进行模板嵌套用的静态页面代码结构基本上是一样,不同的也是每篇新闻的数据:


开心一笑

昨天晚上和几个哥们出去喝酒,喝到十二点才散。早上,哥们来电话了:怎么样,昨天回去那么晚,嫂子没收拾你吧?我回答:说啥呢,她还敢收拾我!?家门她都没敢开!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容