美文网首页
深入讲解SiteServer CMS:模板嵌套

深入讲解SiteServer CMS:模板嵌套

作者: 深入浅出SiteServer | 来源:发表于2017-06-12 02:41 被阅读450次

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

    上篇文章深入讲解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块。进去女浴池一看,玛德,全是男的!
    浴池里的兄弟:哎呀,又来一个

    相关文章

      网友评论

          本文标题:深入讲解SiteServer CMS:模板嵌套

          本文链接:https://www.haomeiwen.com/subject/fljkqxtx.html