深入讲解SiteServer CMS:模板嵌套

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

上篇文章深入讲解SiteServer CMS:创建站点以官方刚刚提供的一套模板为例实战演练一遍SiteServer CMS如何通过站点模板来创建站点。今天详细讲解一下这个站点模板的具体模块是如何使用SiteServer CMS的标签语言(STL)嵌套出来的。

1、模板位置

如果都搞不明白模板文件在服务器上哪个位置,怎么修改?所以首先得搞明白这个问题。

第一步是要搞清楚SiteServer CMS系统安装在服务器上什么位置,这个叫系统根目录。这个自己安装的比较清楚,如果是接手别人的项目,一个比较查看系统根目录的办法就是通过系统访问地址到IIS里去查找站点,然后通过IIS设置里查看站点物理路径即是系统根目录。

第二步是搞清楚本站点的所有文件在服务器上什么位置,这个叫站点根目录。具体办法如下图所示:

从上图可以看到,模板站点:Milenko的站点文件夹就是Milenko,也就是说在系统根目录下找到文件夹Milenko就等于找到了站点根目录。

第三步就是了解SiteServer CMS系统本身对站点里的模板文件存放位置。SiteServer CMS 内容管理系统本身的模板有四种(模板分类的内容可以阅读之前 的文章一步一步演示SiteServer CMS建站过程(二)),每种模板的文件对应存放位置在:

总结一下上图的规律就是:

  • 首页模板:在站点根目录下,系统默认叫:T_系统首页模板.html
  • 栏目模板和单页模板:在站点根目录下的Template文件夹里,栏目模板系统默认叫:T_系统栏目模板.html
  • 内容模板:在站点根目录下的Template/Content文件夹里,系统默认叫:T_系统内容模板.html

2、模板编辑

其实如果不知道模板存在服务器什么位置也是可以进行编辑的添加、修改、删除操作的,只是作为研究一个系统来说,如果这都搞不明白也实在有点说不过去,对吧?

进到SiteServer CMS内容管理系统后台,进入如下界面:


从上图可以看到,本站点所有模板有3个,分别是一个首页模板、一个栏目页模板和一个内容页模板。点击任何一个模板名称,即可进入该模板的编辑界面,如下图所示:


从上图就可以看到,得入首页模板的编辑界面,编辑器里有类大部分是Html代码,但又有小部分SiteServer CMS内容管理系统的模板标签语言Stl代码,这就是模板内容了。至于模板内容上面的字段(模板文件、生成文件名、文件扩展名等)的具体含义,还是可以在之前的文章一步一步演示SiteServer CMS建站过程(二))里查阅到。

如果模板嵌套好了,只是简单修改,可以通过这个编辑界面直接修改,然后保存,再到生成管理去生成相应的页面即可看到效果。

如果我们是重新做一个全新的模板,则应该在这里新创建一个空白模板,然后用自己熟悉的开发软件比如Atom、Visual Studio Code、Dreamwear等等,打开模板文件,把之前切好的静态页面拷过来放在这,然后一点一点进行模板标签语言的替换嵌套,每修改一点点可以保存起来,然后生成页面看嵌套效果,反复如此直到全部套完。

另外,打开栏目和内容模板发现都是空的,表明本站点没有使用栏目页和内容页模板,也即本网站就只有一个首页面。下面就详细讲讲这个首页模板的代码吧。

3、首页模板详解

从上到下认为有必要解释的地方进行代码配套文字的方式进行讲解。

<link href="{Stl.SiteUrl}/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="{Stl.SiteUrl}/css/font-awesome.min.css" rel="stylesheet">
<link href="{Stl.SiteUrl}/css/style.css" rel="stylesheet" type="text/css">
<link href="{Stl.SiteUrl}/css/owl.carousel.css" rel="stylesheet" type="text/css">
<script src="{Stl.SiteUrl}/js/jquery.quovolver.min.js"></script>

以上代码页面头部需要把相应的资源文件比如css、js引进来,此时需要用到一个实体标签{Stl.SiteUrl},意思就是站点根目录的意思。

<title>{Stl.SiteName}</title>

上面代码网页的Title是通过调用实体标签{Stl.SiteName}把网站名称显示在这里。

<span class="grey">{stl:value type=mingzi}</span>{stl:value type=gongsi}

上面代码是要把下图中红色和黑色两个位置的内容通过stl:value标签显示出来:


而这两部分的文字是在后台站点属性设置中进行管理的,如下图所示:


只要修改上图位置中的值,前台就会跟着变化。可能你会有疑问,标签里怎么知道type就是mingzi和gongsi呢?从上图右边的设置站点属性,点击进去你就会明白了,如下图所示:


原来是给这个站点增加了两个字段,字段名就是mingzi和gongsi。所以从这就可以大致理解SiteServer CMS系统(其实所有CMS建站系统都类似)的工作原理,那就是后台定义好相应的字段并进行内容的管理,然后利用自定义的一套标签语言,在不需要程序员的帮助下很方便的就能把内容显示到前台相应的地方上去。和其他系统不一样的地方就是,SiteSever CMS并没有限制或者说定义死后台哪些字段就一定显示在前台哪个位置,而是模板嵌套人员很方便灵活地根据需要放在自己想要出现的地方。

一个很明显的例子就是经常有人问到SiteServer CMS后台没有管理友情链接的地方,如果理解到了刚才这个原理,就能很好解决这个问题了。那就是后台随意建一个栏目,把友情链接的内容(标题、链接)发在此栏目下,然后前台利用标签把这个栏目下的内容显示到友情链接该显示的位置即可。这和其他系统固定一个地方专门用于发友情链接的实现方式相比,是不是特别灵活自由?

<stl:channels groupChannel="nav" topLevel="0">
   <li class="active"><a href="{Channel.ImageUrl}">{Channel.Title}</a></li>
</stl:channels>

以上代码是通过一个栏目标签stl:channels把网站导航调用出来,具体显示效果如下图所示:


这里有两个地方需要解释一下。
第一个是后台栏目这么多怎么决定哪些栏目会显示在导航位置上?通过代码groupChannel="nav" 可以看到,凡是属于栏目组nav的栏目就会出现在这里了。而这是在后台栏目管理的栏目编辑界面里进行设置的,如下图所示的栏目组字段把nav选中即可。
第二个是如何控制点击栏目名称跳到页面上某个位置?通过代码:href="{Channel.ImageUrl}" 可以看到栏目名称对应的地址是在栏目图片(ImageUrl)这个字段来管理的。如下图所示房产预览栏目对应的就是#listed,意味着点击房产预览栏目将跳到id="listed"的控件位置。


<stl:contents channelIndex="我们" totalNum="1">
  <h2><span class="grey"><stl:content type="Title"></stl:content></span> 
     - <stl:content type="SubTitle"></stl:content></h2>
</stl:contents>

以上代码是把栏目索引为“我们”(channelIndex="我们")的栏目的第一篇文章(totalNum="1")的标题(type="Title")和副标题(type="SubTitle")显示到如下图所示的红色和白色位置:


栏目索引是在后台栏目管理中可以查看到,如下图所示:


通过上图可以找到栏目“我们”,然后再到内容管理中,把“我们”栏目第一篇文章打
开找到标题和副标题进行编辑即可控制前台内容:


<stl:contents channelIndex="我们" totalNum="1">
    <h3 style="color: #EFEFEF; text-align: center; font-size: 36px;">
      <stl:content type="slogan1"></stl:content>
    </h3>
</stl:contents>
<stl:contents channelIndex="我们" totalNum="1">
    <h3><stl:content type="slogan2"></stl:content></h3>
    <p>
         <stl:content type="slogan3"></stl:content> 
           <span style="display:block;">
             <stl:content type="slogan4"></stl:content>
           </span>
     </p>
</stl:contents>

以上两段代码是把栏目索引为“我们”(channelIndex="我们")的栏目的第一篇文章(totalNum="1")的slogan1、slogan2、slogan3、slogan4显示到如下图所示的位置:


一样的,把“我们”栏目第一篇文章打开找到slogan1、slogan2、slogan3、slogan4四个字段进行编辑即可控制前台内容:


至于标签代码里的slogan1、slogan2、slogan3、slogan4怎么和上图中的标题1、标题2、标题3、标题4对应上的,则可以通过后台的设置管理中的内容字段管理,找到“我们”栏目的字段内容即可,如下图所示:


关于内容字段的问题,可以在之前的文章深入讲解SiteServer CMS:内容模型里查阅到。

   <h2>
     <stl:channel type="keywords" channelIndex="房产预览"></stl:channel>
        <span>
         <stl:channel type="description" channelIndex="房产预览"></stl:channel>
        </span>
   </h2> 
<div id="owl-demo">    
  <stl:contents channelIndex="房产预览">
    <div class="item">
     ![]({Content.ImageUrl})
        <div class="img-info">
          <h4><stl:content type="Title"></stl:content></h4>
        </div          
    </div>
  </stl:contents>
</div>

以上两段代码是把栏目索引为“房产预览”(channelIndex="房产预览")的栏目的keywords和description以及栏目下所有内容显示到如下图所示的位置:


上图上半部分是通过第一段代码来实现,具体数据是在后台栏目管理中的“房产预览”栏目的编辑界面中,如下图所示的关键字列表和页面描述字段:


左右滚动的图片列表,是通过后台内容管理中的“房产预览”栏目的管理界面,进入每篇内容的编辑界面进行控制的,如下图所示的标题和图片字段:


再往下的代码,都和这些讲解类似,不同的可能就是内容对应的字段不同,原理是一样的。通过本段的讲解你会发现SiteServer CMS模板嵌套的两个关键点:对后台系统的熟悉以及对模板标签语言Stl的熟练运用。前者是让你知道哪些数据应该存储在哪更合理,后者是把数据显示到前台页面的关键。

以上所有标签的具体用法可以参考官方网站STL使用帮助

开心一笑

男:老板,你这儿洗澡多少钱?
店老板:男浴池10元,女浴池100。
男:你抢钱啊。。。
店老板:我的意思是,你想去男浴池还是女浴池?
男:。。。 果断交了100块。进去女浴池一看,玛德,全是男的!
浴池里的兄弟:哎呀,又来一个

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

推荐阅读更多精彩内容