【SSCMS 内容管理系统】STL语言布局篇

前端知识分享喵
325 阅读21分钟

一、概念梳理

  1. 站点

    站点，即通俗意义上的网站。在SiteServer CMS中，一个站点就是一个网站，包括网站栏目、网站内容、网站模板、CSS样式、JS脚本以及最终生成的网站所有页面。

    MySql+SSCMS系统（V6版本）
    SSCMS管理系统（版本 v7）

  2. 栏目

    栏目是存放网站内容的地方，在后台添加网站内容时候，必须添加在某个具体的栏目下。通过栏目，可以将一个网站的内容进行分类，所以栏目还可以叫做站点内容的分类。对于前台网页来说，栏目也可以叫做网站的频道或者菜单。

    如果把一个网站比作一颗枝繁叶茂的大树的话，网站的栏目就是大树的枝干，网站的内容就是枝干上的树叶。网站栏目可以分成父栏目、子栏目，如果有需要的话，还可以一级一级的往下分，每个栏目都可以建自己的下级栏目。在SiteServer CMS中，“首页”是最高级别的栏目，可以在“首页”栏目下面建立无限级数的栏目。可见，网站的栏目就是网站骨架，我们通常把整个网站的所有栏目称为“栏目架构”。如下图所示：

在这里插入图片描述

  1. 内容

    CMS中“内容”的概念通常来说指的就是网站文章（新闻）。SiteServer CMS 后台管理的“内容”是一切可结构化的数据，包括网站LOGO、新闻、图片、视频、投票、广告、招聘、评论等等，都可以被称为“内容”。

  2. 页面

    所谓页面，就是把CMS后台管理的内容展示到前台给用户访问的网页。页面一般分成网站首页、栏目页、内容页以及功能页，比如搜索、登录、问卷调查、表单提交等都属于功能页，也叫单页。

    • 首页

      我们打开一个网站的时候，看到的第一个页面就是首页

    • 栏目页

      当点击某个具体的栏目，进入的就是栏目页

    • 内容页

      当点击某个具体的内容，进入的就是内容页

    • 单页（功能页）

      除了首页、栏目页、内容页之外，SiteServer CMS 中还有一个特殊的页面概念，叫“单页”，这种页面通常是为了实现某一个具体的功能，比如搜索、问卷调查、表单提交、用户登录和注册等，所以又称之为功能页。这些页面和任何一个具体栏目都没有关系。下图展示的一个用户注册页面就是一个典型的单页（或功能页）

  3. 模板

    模板，就是负责把CMS后台管理的内容按一定的表现形式组织起来形成前台页面的一种技术。按一定的表现形式组织起来，这就是模板的内容，模板决定后台内容显示到前台页面后的效果。既然页面一般分成网站首页、栏目页、内容页以及单页，同理模板也就对应分别有首页模板、栏目模板、内容模板以及单页模板。

    模板的主要作用主要有：

    • 决定前台页面显示哪些后台数据；
    • 决定前台页面的风格、样式等表现形式；
    • 多条内容采用相同的模板可以产生表现形式类似的多个静态页面，如果需要调整页面的表形形式，只需要统一调整模板即可。

    以内容模板为例，假设后台一个栏目下有两篇内容，如下图所示：

在这里插入图片描述

这两篇内容使用了一个相同的内容模板，最后产生的两个前台页面分别如下两图：

在这里插入图片描述

以上两个前台内容页面，除了文章的标题和文章内容不同之外，其他信息都是一样的。这就是模板的作用，把后台的内容以一定的表现形式组织起来从而形成前台页面。

嵌套好的模板

嵌套好的模板和静态页面（Html)并无差别，就是在Html中夹杂着STL标签语言。如下图所示：

在这里插入图片描述

二、STL语言概述

STL 语言全称称为 SiteServer 模版语言（SiteServer Template Language），是一种您可以用来创建显示模版的服务器端语言。STL 通过标记符号（元素及实体）来标记要调取并显示的各种网站数据及功能，通过SiteServer 解析引擎将对应标记转换为HTML 语言并在服务器中生成对应的静态页面文件。

SiteServer CMS 系统的核心由内容管理与内容解析两部分组成，STL语言作为 内容管理 与 内容解析 的桥梁，将后台管理的各种动态数据最终解析为用户能访问的静态页面（html标签组成的页面）。

应用：实现功能互动、动态显示、数据统计、数据库解析等一系列功能

插件：各类插件也拥有自己的STL标签，用以实现不同的功能。

​

三、STL语言规则

  • 标签不区分大小写：<stl:a> 和 <stl:A>是相同的
  • 属性值区分大小写：<stl:a channelIndex=“news”> 和 <stl:a channelIndex=“News”> 是不同的
  • 结束标记可以省略：在没有子标签的情况下，STL 可以省略结束标记，功能一致
  • 标签可以嵌套标签：<stl:a><stl:content type=“title”></stl:content></stl:a>

四、元素及实体的区别

  • 概述

    STL标签由元素及实体组成，元素以尖括号 <> 作为标记，实体以大括号 {} 作为标记。它们两个最大区别在于元素能够嵌套子标签而实体无法嵌套子标签。

    STL标签最终会被解析为 html 结构；实体标签最终会被解析为文本字符串

  • 呈现的方式：如显示内容标题

    //采用STL 元素
<stl:content type="title"><stl:content>

//采用STL 实体
{stl:content type="title"}   

//内容实体的简写
{content.title}

  • 属性值处理

    STL标签的属性值使用英文双引号标识

    STL实体的属性值可以使用英文双引号、英文单引号或者无标识

  • 应用场景

    通常情况下在独立使用时采用STL元素，在嵌入标签属性时采用STL实体

    //独立使用时
<stl:content type="summary"></stl:content> 

//嵌入标签属性
<stl:a title="{stl:content type=summary}">

五、STL元素详解

5.1 通用上下文属性

type显示的类型
channelIndex栏目索引，具有唯一性
channelName栏目名称
formatString对显示的日期进行格式化

注：===================

  • 上下文解析原则：

    默认情况下，根据 STL 标签所处环境进行解析，如下：

    <stl:contents channelIndex="indusinfo">
    <stl:a>
        <div class="row contents">
            <div class="col-xs-8">
                <h4>{content.Title}</h4>
                <p class="content"><stl:content type="summary"></stl:content></p>
                <p class="fastnews">新闻快讯/<stl:content type="lastEditDate" formatString="yyyy-MM-dd"></stl:content></p>
            </div>
            <div class="col-xs-4">
                <stl:content type="imageUrl" class="img"></stl:content>
            </div>
        </div>
    </stl:a>
</stl:contents>

    说明：

    1. <stl:contents channelIndex=“indusinfo” > 就是其内部子 STL 标签的上下文环境，指向栏目 indusinfo，

      其内部嵌套的子元素只要是获取当前栏目所属内容，就不需要再重新指定栏目索引channelIndex等属性信息。

    2. 嵌入的 <stl:a>， <stl:a> 默认会被解析为指向此栏目对应内容的列表项，如下为解析后的 HTML 结构：

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KZNIVaLK-1689557477147)(STL语言.assets/image-20200915092503657.png)]

      不难发现，解析后超链接指向本栏下内容列表的不同列表项（内容列表项使用同一个内容模板）

    3. STL标签 <stl:content> 或 STL实体 {content.Title} 默认处于此上下文中，直接通过 type 属性值获取指定内容信息即可。解析后的 HTML 代码如下：

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ybJt3F2-1689557477153)(STL语言.assets/image-20200915093207874.png)]

  • channelIndex：栏目索引是一个站点中栏目的标识，具有唯一性；如果设置了 channelIndex 属性，系统将寻找对应索引的栏目并将上下文切换到此栏目。

  • type：显示栏目属性的类型。根据后台栏目字段的不同 type 属性可以有不同的取值。详细字段请参考

  • formatString：对显示的日期进行格式化

    如下解析内容的添加时间，并按照"yyyy-MM-dd"格式解析

    <stl:content type="AddDate" formatString="yyyy-MM-dd"></stl:content>

    解析后的 HTML 代码

    2020-09-15
    格式模式说明
    dd月中的某一天。一位数的日期有一个前导零。
    MM月份数字。一位数的月份有一个前导零。
    yyyy包括纪元的四位数的年份
    HH24小时制的小时。一位数的小时数有前导零
    mm分钟，一位数的分钟数有一个前导零
    ss秒，一位数的秒数有一个前导零

5.2 栏目标签

STL 元素说明
stl:channel 获取栏目值通过 stl:channel 标签在模板中显示指定栏目的属性值
stl:channels 栏目列表通过 stl:channels 标签在模板中显示栏目列表
stl:pageChannels 翻页栏目列表通过 stl:pageChannels 标签在模板中显示翻页栏目列表

stl:channel 标签

  • stl:channel 标签单独使用时，系统默认将显示当前栏目的值，如果希望显示指定栏目的值，请设置 上下文切换属性（如：channelIndex指定栏目索引）

  • 常用属性

    属性说明
    type显示的类型

  • stl:channel 标签嵌套在 stl:channels以及stl:pageChannels 栏目列表标签内，系统将获取栏目列表项并通过 type 属性解析为相应的值（通常为字符串，如果字段类型为图片系统将解析为标签）

  • type 属性用于明确需要显示栏目的具体字段，如果未设置，系统将显示栏目名称。type类型如下：

      "title" 显示栏目的名称。此值是默认的，如果没有指定属性的话
  "id" 栏目 Id
  "channelIndex" 栏目索引
  "content" 内容 Content
  "pageContent" 能够翻页显示的栏目正文
  "addDate" 显示栏目添加日期
  "imageUrl" 显示栏目图片
  "itemIndex" 项次序数字
  "countOfChannels" 子栏目数
  "countOfContents" 内容数
  "countOfImageContents" 图片内容数
  "keywords" 关键字
  "description" 页面描述
  "自定义字段" 在后台栏目字段管理中自定义的字段名称

stl:channels 标签

  • stl:channels 元素默认显示当前栏目的下级栏目列表，如果希望显示指定栏目的子栏目，请设置 上下文切换 属性

  • 如果使用 stl:channels 元素，系统将对嵌套的标签进行解析并返回嵌套标签的循环列表。

  • 如果使用 {stl:channels} 实体，系统将实体解析为栏目列表的JSON对象数组

  • 常用属性

    属性说明
    channelIndex栏目索引
    channelName栏目名称
    startNum从第几条信息开始显示
    totalNum显示信息总数

​ **注：**如果希望显示所有的下级栏目（包括子栏目和子子栏目），请设置属性 isAllChildren为 true

stl:pageChannels 标签

  • 通过 stl:pageChannels 标签在模板中显示翻页栏目列表

  • stl:pageChannels 标签需要和 STL 标签 stl:pageItems 及 stl:pageItem 配合使用，通常将它们两个置于 stl:pageChannels 标签的下方，代表翻页按钮

  • stl:pageChannels 只能在栏目模版中使用，如果需要在其他类型的模版中使用必须将上面三个相互配合的标签放到 stl:dynamic 动态标签中，否则将无法被正确解析。

  • 常用属性

    属性说明
    channelIndex栏目索引
    channelName栏目名称
    startNum从第几条信息开始显示
    totalNum显示信息总数
    pageNum每页显示的栏目数目

示例======

  • 指定栏目 home 的子栏目名称列表

    STL代码：

    <stl:channels channelIndex="home">
  <stl:channel type="title"></stl:channel><br>
</stl:channels>

    解析后的 HTML 代码：

      新闻<br>
  人才招聘<br>
  互动交流<br>
  信息公开<br>

  • 显示上级栏目的所有子栏目名称列表，并在名称后显示对应的内容数

    <stl:channels upLevel="1">
  <stl:channel type="title"></stl:channel>
  <stl:channel type="CountOfContents"></stl:channel><br>
</stl:channels>

  • 显示当前栏目下的所有子栏目的列表，每 10 个栏目翻一页，列表下方显示翻页导航

    <stl:pageChannels channelIndex="newsList" pageNum="10">
    <stl:a></stl:a>
</stl:pageChannels>
<br />
<stl:pageItems>
    <table cellpadding="0" cellspacing="0" width="90%" height="40" align="center">
        <tr>
            <td align="left">
                <stl:pageItem type="FirstPage" text="首页"></stl:pageItem> |
                <stl:pageItem type="PreviousPage" text="上一页"></stl:pageItem> |
                <stl:pageItem type="NextPage" text="下一页"></stl:pageItem> |
                <stl:pageItem type="LastPage" text="末页"></stl:pageItem>
            </td>
            <td align="right">
                <stl:pageItem type="CurrentPageIndex" text="当前页"></stl:pageItem>
                <stl:pageItem type="PageNavigation"></stl:pageItem>
            </td>
        </tr>
    </table>
</stl:pageItems>

翻页容器和翻页项

  • stl:pageItems 翻页项容器

    • 通过 stl:pageItems 标签在模板中插入翻页项的容器，当不需要翻页时容器内的内容不显示
    • 标签 stl:pageItems 必须包含标签 stl:pageItem 才起作用

  • stl:pageItem 翻页项

    • stl:pageItem 标签需要在标签 stl:pageItems 内使用

    • 通过 stl:pageItem 标签在模板中显示翻页项（上一页、下一页、当前页、页跳转、页导航等）

    • stl:pageItem 标签内可以嵌入代码，通过 子标签 stl:yes 和 stl:no 控制当前页是否显示不同的样式

      子标签说明
      stl:yes能够转到对应页面时的显示模板（非当前页），可以省略
      stl:no不能转到对应页面时的显示模板（当前页），可以省略

    • 常用属性：

      所有属于HTML 标签 的属性均适用于 stl:pageItem 标签

      属性说明
      type翻页类型
      text显示的文字

      type翻页类型：

      • "CurrentPageIndex" 当前页索引
      • "FirstPage" 首页
      • "LastPage" 末页
      • "NextPage" 下一页
      • "PageNavigation" 页导航
      • "PageSelect" 页跳转
      • "PreviousPage" 上一页
      • "TotalNum" 总内容数
      • "TotalPageNum" 总页数

翻页导航示例： ===

  • 翻页项根据是否当前页显示不同的风格

    <stl:pageItems>
    <div class="pagination">
      <ul>
        <li><a href="{PageItem.PreviousPage}">Prev</a></li>
        <stl:pageItem type="PageNavigation">
          <stl:yes>
            <li><a href="{Current.Url}">{Current.Num}</a></li>
          </stl:yes>
          <stl:no>
            <li class="active"><span>{Current.Num}</span></li>
          </stl:no>
        </stl:pageItem>
        <li><a href="{PageItem.NextPage}">Next</a></li>
      </ul>
    </div>
</stl:pageItems>

    注：stl:yes 和 stl:no 通常包含 链接，其中可以包含 {Current.Url} 以及 {Current.Num} 实体，分别代表翻页链接地址及当前页页码。

  • 显示包含 CSS 样式的组合翻页标签（上一页、数字导航及下一页）

    STL 元素结构：

    <style type="text/css">
    .page_wrap{clear:both; margin-bottom:10px; overflow:hidden;zoom:1;}
    .paginator {float:right; height:25px; overflow:hidden; }
    
    .paginator,
    .paginator input,
    .paginator button {font-family:Tahoma, "宋体"; font-size:12px; }
    
    .paginator a,
    .paginator span {
    	float:left; height:23px; margin:0 5px 0 0; 
    	text-align:center; white-space:nowrap; vertical-align:middle; 
    	line-height:23px; background:#fff; }
    	
    .paginator a {color:#085C9B; }
    .paginator b{font-family:"宋体"; margin:3px;font-weight:300;}
    
    .paginator a:link,
    .paginator a:visited,
    .paginator a:hover,
    .paginator a:active {text-decoration:none; }
    
    .paginator .page-start,
    .paginator a,
    .paginator .page-end {
    	padding:0 8px; border:1px solid #D3D3D3; background:#ffffff; }
    	
    .paginator .page-start {border-color:#d9d9d9; color:#d9d9d9; }
    .paginator .page-end { border-color:#d9d9d9;  color:#d9d9d9; }
    
    .paginator .page-this,
    .paginator .page-break {padding:0 3px; }
    
    .paginator .page-break {border:1px solid #fff; }
    
    .paginator .page-this {
    	border:1px solid #D3D3D3;background-color:#E9E9E9; 
    	color:#D4105A;padding:0px 8px; font-weight:bold; }
    	
    .paginator .page-skip {
    	height:22px; line-height:22px; 
    	padding:0 3px; margin:0; background:none; }
    	
    .paginator .page-skip input {
    	width:26px;  *width:23px;height:19px;
    	line-height:19px;border:1px #D3D3D3 solid;font-size:12px; 
    	margin:-1px 6px 0px 6px;#margin-top:1px;_margin-top:0px;
    	padding:0px 0px 0px 2px; vertical-align:middle; 
    	padding-top:0px; padding-bottom:0px; }
    	
    .paginator .page-skip button {
    font-size:12px; padding:0 5px 5px 5px;_padding:0 5px 0 5px; 
    width:auto; _width:0; height:22px;  
    *height:23px; *line-height:20px; _height:16px; 
    _line-height:16px; margin-left:10px;  
    *margin-top:-1px;overflow:visible; vertical-align:top; }
    
    .paginator a:hover {border:1px solid #A6A6A6;color:#868688; }
</style>

<stl:pageItems>
    <div class="page_wrap">
      <div class="paginator">
      <stl:pageItem type="PreviousPage">
        <stl:yes>
          <a class="page-prev" href="{Current.Url}">上一页</a>
        </stl:yes>
        <stl:no>
          <span class="page-start">上一页</span>
        </stl:no>
      </stl:pageItem>
      <stl:pageItem type="PageNavigation">
        <stl:yes>
          <a href="{Current.Url}">{Current.Num}</a>
        </stl:yes>
        <stl:no>
          <span class="page-this">{Current.Num}</span>
        </stl:no>
      </stl:pageItem>
      <stl:pageItem type="NextPage">
        <stl:yes>
          <a class="page-next" href="{Current.Url}">下一页</a>
        </stl:yes>
        <stl:no>
          <span class="page-end">下一页</span>
        </stl:no>
      </stl:pageItem>
      </div>
    </div>
</stl:pageItems>

5.3 内容标签

STL 元素说明
stl:content 获取内容值通过 stl:content 标签在模板中显示指定内容的属性值
stl:contents 内容列表通过 stl:contents 标签在模板中显示内容列表
stl:pageContents 翻页内容列表通过 stl:pageContents 标签在模板中显示翻页内容列表

stl:content 标签

  • stl:content 标签在内容模板中单独使用时，系统默认将显示当前内容的值

  • 常用属性

    属性说明
    type显示的类型
    no显示第几项

  • 如果 stl:content 标签嵌套在 stl:contents以及stl:pageContents 内容列表标签内，系统将根据内容字段的类型解析为不同的值（通常为字符串，如果字段类型为图片系统将解析为标签）

  • type 属性用于明确需要显示内容的具体字段，如果未设置，系统将显示内容标题。type属性值如下：

    • "title" 内容标题
    • "id" 内容 Id
    • "addUserName" 内容添加者
    • "addDate" 内容添加时间
    • "lastEditUserName" 最后修改内容的用户名
    • "lastEditDate" 内容的最后修改时间
    • "subTitle" 内容副标题
    • "summary" 内容简介
    • "imageUrl" 内容图片
    • "linkUrl" 内容链接
    • "fileUrl" 内容附件
    • "author" 内容作者
    • "source" 内容来源
    • "content" 内容正文
    • "pageContent" 能够翻页显示的内容正文
    • "tags" 内容标签
    • "hits" 内容总点击量
    • "hitsByDay" 日点击量
    • "hitsByWeek" 周点击量
    • "hitsByMonth" 月点击量
    • "lastHitsDate" 最后一次点击时间
    • "itemIndex" 项次序数字
    • "自定义字段" 在后台内容字段管理中自定义的字段名称

stl:contents 标签

  • stl:contents 元素默认显示当前栏目的内容列表，如果希望显示指定栏目的内容列表，请设置 上下文切换 属性。

  • 如果使用 stl:contents 元素，系统将对嵌套的标签进行解析并返回嵌套标签的循环列表。

  • 如果使用 {stl:contents} 实体，系统将实体解析为内容列表的JSON对象数组。

  • 常用属性

    所有属于 HTML 标签 table 的成员均适用于 stl:contents 标签

    属性说明
    channelIndex栏目索引
    channelName栏目名称
    totalNum显示信息总数。默认值为 0，代表显示所有信息
    startNum从第几条信息开始显示。默认值为 1，代表从第一条信息开始显示
    order排序
    isTop仅显示置顶内容
    isRecommend仅显示推荐内容
    isHot仅显示热点内容
    isColor仅显示醒目内容

  • 属性说明

    • order - 排序

      内容列表排序方式。此属性只可属于以下可能的取值的一种：

      • "default" 默认排序，即内容管理界面中的排序
      • "back" 默认排序的相反方向
      • "addDate" 按添加时间排序
      • "addDateBack" 按添加时间的相反方向排序
      • "lastEditDate" 按最后更改时间排序
      • "lastEditDateBack" 按最后更改时间的相反方向排序
      • "hits" 按点击量排序
      • "hitsByDay" 按日点击量排序
      • "hitsByWeek" 按周点击量排序
      • "hitsByMonth" 按月点击量排序
      • "random" 随机显示内容

    • is 开头的属性

      属性值有两个：true 和 false

      如：isHot 属性值为 true，仅显示热点的内容；属性值为 false，仅显示非热点的内容

      其它几个类似…

stl:pageContents 标签

通过 stl:pageContents 标签在模板中显示翻页内容列表

stl:pageContents 标签需要和 STL 标签 stl:pageItems 及 stl:pageItem 配合使用

通常将 STL 标签 stl:pageItems 及 stl:pageItem 置于 stl:pageContents 标签的下方，代表翻页按钮。

stl:pageContents 只能在栏目模版中使用，如果需要在其他类型的模版中使用必须将 stl:pageContents 标签和对应的 stl:pageItems 翻页标签放到 stl:dynamic 动态标签中，否则 stl:pageContents 标签将无法解析。

属性

所有属于 STL 标签 stl:contents 的成员均适用于 stl:pageContents 标签，所有属于 HTML 标签

的成员均适用于 stl:pageContents标签。

属性说明
pageNum每页显示的内容数目
maxPage最多生成静态页面数目

其它属性 同 stl:contents 标签属性

翻页容器和翻页项标签，详见 stl:pageChannels 标签栏目分页描述，使用方法一致

示例 ===========

  • 显示"新闻"栏目下的带图片的内容列表

    STL 代码：

    <stl:contents channelIndex="新闻" isImage="true">
	<stl:a><stl:image></stl:image></stl:a>
</stl:contents>

    解析后 HTML 代码：

    <a href="/news/4.html"><img src="/upload/images/2013/6/t_7164418763.jpg"></a>
<a href="/news/3.html"><img src="/upload/images/2013/6/t_7164446419.jpg"></a>
<a href="/news/2.html"><img src="/upload/images/2013/6/t_7164446419.jpg"></a>
<a href="/news/1.html"><img src="/upload/images/2013/6/t_7164418763.jpg"></a>

  • 显示栏目索引为"starting"的栏目下的所有内容的前 7 篇列表

    STL 代码：

    <stl:contents channelIndex="starting" totalNum="7">
	<stl:a><stl:content type="Title"></stl:content></stl:a>
	<br />
</stl:contents>

    解析后 HTML 代码：

    <a href="/getting-started/index.html">STL 语言</a>
<br>
<a href="/getting-started/5.html">STL 标签与 STL 实体</a>
<br>
<a href="/getting-started/4.html">STL 模板语言规则</a>
<br>
<a href="/getting-started/3.html">STL 实体说明</a>
<br>
<a href="/getting-started/2.html">STL 翻页标签与实现</a>
<br>
<a href="/getting-started/1.html">STL 地址通配符</a>
<br>

  • 显示当前栏目下的所有内容的列表，列表下方显示翻页导航

    <stl:pageContents channelIndex="新闻" pageNum="20" cellpadding="2" cellspacing="2">
    <stl:a target="_blank"></stl:a> <stl:content type="AddDate"></stl:content>
</stl:pageContents>
<br />
<stl:pageItems>
    <table cellpadding="0" cellspacing="0" width="90%" height="40" align="center">
    <tr><td align="left">
    <stl:pageItem type="FirstPage" text="首页"></stl:pageItem> |
    <stl:pageItem type="PreviousPage" text="上一页"></stl:pageItem> |
    <stl:pageItem type="NextPage" text="下一页"></stl:pageItem> |
    <stl:pageItem type="LastPage" text="末页"></stl:pageItem>
    </td><td align="right">
    <stl:pageItem type="CurrentPageIndex" text="当前页："></stl:pageItem>
    <stl:pageItem type="PageNavigation"></stl:pageItem>
    </td></tr></table>
</stl:pageItems>

5.4 导航标签

导航标签包含所有与页面导航相关的标签，包括链接、当前位置、导航、以及下拉菜单等

STL 元素说明
stl:a 获取链接通过 stl:a 标签在模板中创建链接，系统将根据所处上下文计算链接地址
stl:location 当前位置通过 stl:location 标签在模板中插入页面的当前位置
stl:navigation 显示导航通过 stl:navigation 标签在模板中显示链接导航
stl:tree 树状导航通过 stl:tree 标签在模板中显示树状导航

链接标签 stl:a

  • stl:a 元素可以创建一个到其他站点、栏目以及内容页或任何其他URL地址的超链接

  • 标签 stl:a 在栏目模版中默认显示此栏目的链接，在内容模版中默认显示此内容的链接，如果希望显示指定栏目的链接，请设置 上下文切换 属性。

  • 如果标签嵌入在列表标签内，则默认链接地址当前列表项的链接：

    • stl:a 标签能够作为 stl:channels 等标签的子标签，当作为 stl:channels 的子标签使用时将显示栏目链接。
    • stl:a 标签能够作为 stl:contents 等标签的子标签，当作为 stl:contents 的子标签使用时将显示内容链接。

  • 可以把任何 STL 标签或者 HTML 标签嵌套在 stl:a 元素内，如果stl:a 元素内没有嵌套任何标签，系统将把对应的栏目或者内容的名称作为嵌套文本显示出来。

  • 如果使用 stl:a 元素，系统将解析元素为 HTML 元素。

    如果使用 {stl:a} 实体，系统将解析实体为 URL地址字符串。

  • 属性：

    所有属于HTML 标签 的属性均适用于stl:a标签

    属性说明
    context所处上下文

    通常如果标签被嵌套在列表元素中时，系统会设置上下文为当前的列表类型，同时对标签进行解析时也将根据列表类型进行判断。

    如果希望 stl:a 标签无论在内容列表还是栏目列表下，都只显示指定链接，通过 context 属性设置，如下：

    • "default" 默认，即当前所处上下文。
    • "content" 内容上下文。
    • "channel" 栏目上下文。
    • "sqlContent" Sql 内容上下文。
    • "site" 站点上下文。
    <!-- 分别显示栏目与内容链接 -->
<stl:channels>
  <stl:contents>
    栏目：<stl:a context="channel"></stl:a>
    内容：<stl:a></stl:a>
  </stl:contents>
</stl:channels>

示例：==========

  • 显示当前栏目的内容列表，内容链接为内容标题

    STL代码：

    <stl:contents>
  <stl:a target="_blank"></stl:a><br>
</stl:contents>

    解析后的 HTML 代码：

      <a href="/a/index.html" target="_blank">stl:a 标签用法</a><br>
  <a href="/a/2.html" target="_blank">stl:a 标签示例（单独使用）</a><br>
  <a href="/a/1.html" target="_blank">stl:a 标签示例（嵌套使用）</a><br>

  • 显示当前栏目的内容列表，内容链接为内容标题

    STL代码：

    <stl:channels channelIndex="首页" groupChannel="主导航">
  <stl:a target="_blank"></stl:a><br>
</stl:channels>

    解析后的 HTML 代码：

      <a href="/getting-started/index.html" target="_blank">起 步</a><br>
  <a href="/channels/4.html" target="_blank">STL标签</a><br>
  <a href="/channels/79.html" target="_blank">STL实体</a><br>

  • 单独使用，显示指定索引的栏目链接

    STL代码：

    <stl:a channelIndex="首页" target="_blank"></stl:a>

    解析后的 HTML 代码：

    <a href="https://sscms.com/docs/" target="_blank">首 页</a>

5.5 图片及多媒体标签

STL 元素说明
stl:image 显示图片通过 stl:image 标签在模板中显示栏目或内容的图片
stl:file 文件下载链接通过 stl:file 标签在模板中显示文件下载链接
stl:video 播放视频通过 stl:video 标签在模板中显示视频播放器
stl:audio 播放音频通过 stl:audio 标签在模板中显示并播放音频文件
stl:flash 显示 Flash通过 stl:flash 标签在模板中获取并显示栏目或内容的 Flash
stl:player 播放视频通过 stl:player 标签在模板中播放视频
stl:focusViewer 滚动焦点图通过 stl:focusViewer 标签在模板中显示滚动焦点图

stl:image

  • 标签 stl:image 在栏目模版中默认显示此栏目的图片，在内容模版中默认显示此内容的图片。
  • stl:image 标签的地址取自栏目或内容的图片地址，当图片地址为SWF结尾时自动转成 stl:flash 标签
  • stl:image 标签能够作为 stl:channels 等标签的子标签，当作为 的子标签使用时将显示栏目的图片。 stl:image 标签能够作为 stl:contents 等标签的子标签，当作为 的子标签使用时将显示内容的图片。

示例 ==========

  • 显示栏目索引为"新闻"的栏目的内容图片列表，点击图片后新窗口打开内容页

    STL代码：

    <stl:contents channelIndex="新闻" totalNum="3" isImage="true" width="80%">
    <stl:a target="_blank">
        <stl:image width="200" height="100"></stl:image>
    </stl:a>
</stl:contents>

    解析后的 HTML 代码：

    <a href="/news/4.html" target="_blank">
    <img src="/upload/images/2013/6/t_7164418763.jpg" width="200" height="100">
</a>
<a href="/news/3.html" target="_blank">
    <img src="/upload/images/2013/6/t_7164446419.jpg" width="200" height="100">
</a>
<a href="/news/2.html" target="_blank">
    <img src="/upload/images/2013/6/t_7164446419.jpg" width="200" height="100">
</a>

  • 显示指定的文件图片

    STL代码：

    <stl:image src="@/images/banner.jpg" height="100"></stl:image>

    解析后的 HTML 代码：

    <img src="/images/banner.jpg" height="100">

  • 显示当前栏目的图片，如果栏目没有图片显示，则不显示任何信息

    STL代码：

    <stl:container context="Channel">
    <stl:image></stl:image>
</stl:container>

    解析后的 HTML 代码：

    <img src="/assets/img/bootstrap-mdo-sfmoma-01.jpg">

5.6 站点标签

站点标签包含获取网站列表以及网站属性相关的标签。

STL 元素说明
stl:value 获取值通过 stl:value 标签在模板中获取值
stl:sites 站点列表通过 stl:sites 标签在模板中显示站点列表
stl:site 获取站点值通过 stl:site 标签在模板中显示站点值

  • stl:value 获取值

    type 属性可以是指定的字符串，代表"自定义模板语言"中定义的标签名称，系统将解析对应的自定义模板标签

    type属性值如下：

    • "siteName" 站点名称
    • "siteUrl" 站点的域名地址
    • "date" 当前日期（不支持 isDynamic 属性）
    • "dateOfTraditional" 带农历的当前日期（不支持 isDynamic 属性）

    示例：显示站点名称

    <stl:value type="SiteName"></stl:value>

附录：其它标签详见官网API sscms.com/docs/v6/stl…

六、STL实体详解

STL实体包裹在开始和结束大括号 {} 中，属性用空格隔开，无法包含其他标签作为子标签

// 单独使用 解析为对应的标签
{stl:a channelIndex="home"}  //解析为指向 home 栏目的超链接 a 标签

// HTML属性中使用
<img alt="{stl:content type='summary'}"></img>

// STL属性中使用
<stl:a title="{stl:content type='title'}"></stl:a>

//JS 代码处理的对象主要是不带格式的纯数据，所以使用STL实体返回纯文本或者JSON对象非常关键
<script type="text/javascript">
	var arr = {stl:contents};
<script>

注：=============

  • STL实体通常解析为 JSON 对象 (JS中) 或者 纯文字 (HTML | CSS中)

  • 一般来说，大部分功能都可以通过STL元素来实现，但以下情况 STL 元素不适合：

    • 需要在属性中设置数据
    • 需要在 JavaScript 代码中设置数据

6.1 STL实体简写

为了方便，STL实体可以使用简写方式，简写方式不需要包含前缀 stl:，且无法设置属性。

  • 常见的几种简写如下

    {stl.xyz}

    {stl:value type=‘xyz’} 的简写。

    {stl.} 代表 {stl:value} 元素的简写，{stl:value type=siteUrl} 等价于{stl.siteUrl}。

    注：{stl.siteUrl} 指向站点的域名地址 (子站点根目录)

    {channel.xyz}

    {stl:channel type=‘xyz’} 的简写。

    {channel.} 代表 {stl:channel} 元素的简写，{stl:channel type=title} 等价于{channel.title}。

    {content.xyz}

    {stl:content type=‘xyz’} 的简写。

    {content.} 代表 {stl:content} 元素的简写，{stl:content type=title} 等价于{content.title}。

七、地址通配符

通配符（“~”）来表示应用程序的根目录

<stl:a href="~/index.html">主站</stl:a>    //生成指向到主站点index.html文件的链接

通配符（“@”）来表示当前站点的域名地址

<stl:a href="@/index.html">本站</stl:a>    //生成指向到当前站点index.html文件的链接

八、文件复用

包含文件 用于创建可在多个页面重复使用的页眉、页脚或元素

包含文件，即可以被复用的文件（一般指html文件），需要通过 <stl:include file=“url”\> 标签引入

如下，一个名为 “footer.html” 的标准页脚文件，存在在当前子站点根目录下的 include 文件夹中

<p>Copyright © 2006-2018 {stl.siteName}</p>

在模板中引用这个页脚文件

<stl:include file="@/include/footer.html"></stl:include>

九、列表循环

在页面中循环显示列表数据是频繁使用的功能，如：获取某个栏目下的内容列表，或者 在导航栏显示栏目列表 等等。

常用的列表循环标签有以下四种：

列表标签说明
stl:contents内容列表
stl:pageContents翻页内容列表
stl:channels栏目列表
stl:pageChannels翻页栏目列表

解析规则：

  • 列表标签使用元素的写法时，标签内必须嵌套 HTML 或者 STL 标签

    列表标签会逐项解析嵌套的标签并循环显示

    如果列表标签内没有嵌套内容，系统将忽略此标签

    <stl:contents></stl:contents>  //内容列表标签内没有嵌套子标签，将不会被解析

  • 列表标签使用实体的写法时，标签将解析为JSON数组，数组内的项为列表项的JSON对象，如下：

    JS 中使用变量接收 STL 实体返回的数据：

    <script>
	var arr = {stl:contents};
</script>

    解析后的代码：

    <script>
    var arr = [{
        "id":10935, //内容id
        "channelId":1746, //栏目索引id
        "addUserName":"admin", //内容添加人
        "lastEditUserName":"admin",  //内容最后编辑人
        "lastEditDate":"2018-06-13 12:27:00",  //内容最后编辑时间
        "title":"第九届国际发明展览会爱登堡电梯集团荣获 “发明创业&#8226;项目奖”", //内容标题
        "isTop":"False",  //内容是否置顶
        "isRecommend":"False",  //内容是否推荐
        "isHot":"False",  //内容是否指定为热点内容
        "addDate":"2015-09-30  13:52:00",  //内容添加时间
        "subTitle":"",  //副标题
        "imageUrl":"",  //内容图片
        "videoUrl":"",  //视频路径
        "fileUrl":"",   //内容附件
        "content":"<div>近日，第九届国际发明展览会在昆山国际会展中心圆满落幕...</div>
                    <div>电梯研发部<br/>一种用于高速...</div>
                    <div>扶梯研发部一种具有安全隔离控制柜的自...</div>
                    <div>车库研发部<br/>多台共柱安装的双层...提高停车空间利用率。</div",
        "summary":"",  //内容简介，内容概述    
        "author":"",   //内容作者
        "source":"",   //内容来源
        "navigationUrl":"/test19/contents/1746/10935.html"
    },{
    	"id":10935, 
    	"channelId":1746, 
    	....
    	"source":"",
        "navigationUrl":"/test19/contents/1746/10935.html"
    },...];
</script>

9.1 通过属性控制列表

列表标签可以通过设置属性来控制所有列表项的显示方式

  • totalNum 设置列表一共显示多少条信息，默认值为 0，代表显示所有信息

    <stl:contents totalNum="7">
  <stl:a></stl:a><br />
</stl:contents>

  • startNum 设置列表从第几条信息开始显示，默认值为 1，代表从第一条信息开始显示

    <stl:contents startNum="3" totalNum="7">
  <stl:a></stl:a><br />
</stl:contents>

  • pageNum 设置翻页列表每一页显示的列表项数目，默认值为 25

    此属性仅针对翻页列表标签起作用： stl:pageContents、stl:pageChannels 及 stl:pageSqlContents

    <stl:pageContents pageNum="15">
    <stl:a target="_blank"></stl:a><br />
</stl:pageContents>

  • maxPage 设置翻页列表最多显示多少页，默认值为 0，代表不控制显示页数

    此属性在列表翻页特别多的时候可以用来控制总页数，比如只列出前10页的内容，从而提高生成页面速度

    此属性仅针对翻页列表标签起作用

    <stl:pageContents pageNum="20" maxPage="100">
    <stl:a target="_blank"></stl:a><br />
</stl:pageContents>

9.2 stl:itemTemplate 控制列表具体某一项

<stl:itemTemplate> 列表项子元素标签，控制列表中具体某一项的显示效果

如下：内容列表 采用 不同的颜色交替显示（斑马线效果）

<stl:contents>
    <stl:itemTemplate type="Item">
        <stl:a><stl:content type="Title"></stl:content></stl:a><br />
    </stl:itemTemplate>
    <stl:itemTemplate type="AlternatingItem">
        <stl:a style="color:red"><stl:content type="Title"></stl:content></stl:a> <br />
    </stl:itemTemplate>
</stl:contents>
avatar
文章
阅读
粉丝