[SSCMS Content Management System] STL Language Layout

News 2023-08-01 22:26:31 views: null

1. Conceptualization

  1. site

    Site, that is, a website in the popular sense. In SiteServer CMS, a site is a website, including website columns, website content, website templates, CSS styles, JS scripts and all pages of the final generated website.

    MySql+SSCMS system (version V6)
    SSCMS management system (version v7)

  2. column

    Columns are where website content is stored. When adding website content in the background, it must be added under a specific column. Through the column, the content of a website can be classified, so the column can also be called the classification of the site content. For the front page, the column can also be called the channel or menu of the website.

    If a website is compared to a big tree with luxuriant branches, the columns of the website are the branches of the big tree, and the content of the website is the leaves on the branches. Website columns can be divided into parent columns and sub-columns. If necessary, they can be subdivided level by level. Each column can create its own sub-column. In SiteServer CMS, "Home Page" is the highest-level column, and unlimited series of columns can be created under the "Home Page" column. It can be seen that the columns of the website are the skeleton of the website, and we usually refer to all the columns of the entire website as "column structure". As shown below:

insert image description here

  1. content

    The concept of "content" in CMS generally refers to website articles (news). The "content" managed by SiteServer CMS background is all structurable data, including website LOGO, news, pictures, videos, polls, advertisements, recruitment, comments, etc., can be called "content".

  2. page

    The so-called page is a web page that displays the content managed by the CMS background to the foreground for users to visit. Pages are generally divided into website homepage, column page, content page, and function page, such as search, login, questionnaire, form submission, etc., are all function pages, also called single pages.

    • front page

      When we open a website, the first page we see is the home page

    • column page

      When you click on a specific column, you will enter the column page

    • content page

      When you click on a specific content, you will enter the content page

    • Single page (feature page)

      In addition to the home page, column page, and content page, there is also a special page concept in SiteServer CMS called "single page". This page is usually for a specific function, such as search, questionnaire, form submission, User login and registration, etc., so it is also called a function page. These pages are not related to any specific column. A user registration page shown in the figure below is a typical single page (or function page)

  3. template

    The template is a technology responsible for organizing the content managed by the CMS backstage according to a certain form of expression to form the front page. Organized according to a certain form of expression, this is the content of the template, and the template determines the effect of the background content displayed on the front page. Since pages are generally divided into website homepage, column page, content page, and single page, similar templates also correspond to homepage templates, column templates, content templates, and single-page templates.

    The main functions of templates are:

    • Decide which background data is displayed on the front page;
    • Determine the style, style and other forms of expression of the front page;
    • Using the same template for multiple pieces of content can generate multiple static pages with similar presentation forms. If you need to adjust the form of the page, you only need to adjust the template uniformly.

    Take the content template as an example, assuming that there are two content under one column in the background, as shown in the following figure:

insert image description here

These two pieces of content use the same content template, and the final two front-end pages are as follows:

insert image description here

The above two front-end content pages have the same information except for the title and content of the article. This is the role of the template, which organizes the background content in a certain form to form the front page.

nested template

There is no difference between nested templates and static pages (Html), that is, STL tag language is mixed in Html. As shown below:

insert image description here

2. Overview of STL language

The full name of the STL language is SiteServer Template Language, which is a server-side language that you can use to create display templates. STL uses tag symbols (elements and entities) to mark various website data and functions to be called and displayed, and converts the corresponding tags into HTML language through the SiteServer parsing engine and generates corresponding static page files in the server.

The core of the SiteServer CMS system is composed of two parts: content management and content analysis. STL language serves as a bridge between content management and content analysis , and finally parses various dynamic data managed in the background into static pages (pages composed of html tags) that users can access. .

Application: Realize a series of functions such as functional interaction, dynamic display, data statistics, database analysis, etc.

Plug-ins: Various plug-ins also have their own STL tags to achieve different functions.

​

3. STL language rules

  • Tags are case insensitive : <stl:a> and <stl:A> are the same

  • Attribute values ​​are case sensitive : <stl:a channelIndex="news"> and <stl:a channelIndex="News"> are different

  • The end tag can be omitted : In the case of no subtag, STL can omit the end tag, and the function is the same

  • Tags can nest tags : <stl:a><stl:content type="title"></stl:content></stl:a>

Fourth, the difference between elements and entities

  • overview

    STL tags are composed of elements and entities. Elements are marked with angle brackets , and entities are marked with <>braces . {}The biggest difference between them is that elements can nest sub-tags but entities cannot nest sub-tags.

    STL tags will eventually be parsed into html structures; entity tags will eventually be parsed into text strings

  • The way of rendering : such as displaying the title of the content

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

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

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

  • Attribute value processing

    The attribute value of the STL tag is identified by English double quotation marks

    The attribute values ​​of STL entities can use English double quotes, English single quotes or no logo

  • Application Scenario

    Usually, STL elements are used when used independently, and STL entities are used when embedded in tag attributes

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

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

5. Detailed explanation of STL elements

5.1 Common context attributes

type display type
channelIndex column index, unique
channelName program name
formatString Format the displayed date

Note : ===================

  • Principles of context analysis:

    By default, it is parsed according to the environment where the STL tag is located, as follows:

    <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>

    Description :

    1. <stl:contents channelIndex="indusinfo"> is the context of its internal sub-STL tags, pointing to the column indusinfo,

      As long as the internal nested sub-elements are to obtain the content of the current column, there is no need to re-specify attribute information such as column index channelIndex.

    2. Embedded <stl:a>, <stl:a> will be parsed as a list item pointing to the corresponding content of this column by default, the parsed HTML structure is as follows:

      [External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-KZNIVaLK-1689557477147)(STL language.assets/image-20200915092503657.png)]

      It is not difficult to find that after parsing, the hyperlinks point to different list items in the content list under this column ( the content list items use the same content template )

    3. The STL tag <stl:content> or the STL entity {content.Title} is in this context by default, and the specified content information can be obtained directly through the type attribute value. The parsed HTML code is as follows:

      [External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-5ybJt3F2-1689557477153) (STL language.assets/image-20200915093207874.png)]

  • channelIndex : The column index is the identifier of the column in a site, which is unique; if the channelIndex property is set, the system will search for the column corresponding to the index and switch the context to this column.

  • type : Display the type of column attribute. Depending on the type attribute of the background column field, it can have different values. Please refer to the detailed fields

  • formatString : format the displayed date

    The adding time of the content is parsed as follows, and parsed according to the "yyyy-MM-dd" format

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

    Parsed HTML code

    2020-09-15
    format pattern illustrate
    dd the day of the month. Single-digit dates have a leading zero.
    MM month number. Single-digit months have a leading zero.
    yyyy four-digit year including the era
    HH The hour in 24-hour format. Single-digit hours have leading zeros
    mm minutes, single-digit minutes have a leading zero
    ss seconds, single-digit seconds have a leading zero

5.2 Column label

STL elements illustrate
stl:channel get column value Display the attribute value of the specified column in the template through the stl:channel tag
stl:channels column list Display the list of columns in the template through the stl:channels tag
stl:pageChannels list of page turning columns Display the list of page turning columns in the template through the stl:pageChannels tag

stl:channel tag

  • When the stl:channel tag is used alone, the system will display the value of the current column by default. If you want to display the value of the specified column, please set the context switching attribute (such as: channelIndex specifies the column index)

  • common attributes

    Attributes illustrate
    type display type

  • The stl:channel tag is nested in the stl:channels and stl:pageChannels column list tags, the system will get the column list items and parse them into corresponding values ​​through the type attribute (usually a string, if the field type is an image, the system will parse it into a tag )

  • The type attribute is used to specify the specific field that needs to display the column. If it is not set, the system will display the column name. The type type is as follows:

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

stl:channels tag

  • The stl:channels element displays the list of lower-level columns of the current column by default. If you want to display the sub-sections of the specified column, please set the context switching attribute

  • If the stl:channels element is used, the system will parse the nested tags and return a circular list of nested tags.

  • If the {stl:channels} entity is used, the system parses the entity into an array of JSON objects of the column list

  • common attributes

    Attributes illustrate
    channelIndex column index
    channelName program name
    startNum From the first few information to display
    totalNum Total information displayed

​ **Note:** If you want to display all sub-columns (including sub-columns and sub-sub-columns), please set the property isAllChildren to true

stl:pageChannels tag

  • Display the list of page turning columns in the template through the stl:pageChannels tag

  • The stl:pageChannels tag needs to be used in conjunction with the STL tags stl:pageItems and stl:pageItem, and they are usually placed under the stl:pageChannels tag to represent the page turning button

  • stl:pageChannels can only be used in column templates. If it needs to be used in other types of templates, the above three tags that cooperate with each other must be placed in the stl:dynamic dynamic tag, otherwise it will not be parsed correctly.

  • common attributes

    Attributes illustrate
    channelIndex column index
    channelName program name
    startNum From the first few information to display
    totalNum Total information displayed
    pageNum Number of columns displayed per page

Example ======

  • A list of subsection names of the specified section home

    STL code:

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

    Parsed HTML code:

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

  • Display a list of all sub-section names of the parent column, and display the corresponding content number after the name

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

  • Display a list of all sub-columns under the current column, turn a page every 10 columns, and display page-turning navigation below the list

    <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>

Flip Container and Flip Items

  • stl:pageItems page item container

    • Insert the container of the page turning item in the template through the stl:pageItems tag, and the content in the container is not displayed when the page is not required
    • The tag stl:pageItems must contain the tag stl:pageItem to work

  • stl:pageItem page turning item

    • The stl:pageItem tag needs to be used inside the tag stl:pageItems

    • Display page turning items (previous page, next page, current page, page jump, page navigation, etc.) in the template through the stl:pageItem tag

    • The code can be embedded in the stl:pageItem tag, and whether the current page displays different styles can be controlled through the subtags stl:yes and stl:no

      subtag illustrate
      stl:yes The display template (not the current page) when you can go to the corresponding page, can be omitted
      stl:no The display template (current page) when you cannot go to the corresponding page, can be omitted

    • Common properties:

      All attributes that belong to the HTML tag apply to the stl:pageItem tag

      Attributes illustrate
      type Flip type
      text displayed text

      type page flip type :

      • "CurrentPageIndex"current page index
      • "FirstPage"front page
      • "LastPage"last page
      • "NextPage"next page
      • "PageNavigation"page navigation
      • "PageSelect"page jump
      • "PreviousPage"previous page
      • "TotalNum"total content
      • "TotalPageNum"total pages

Page navigation example: ===

  • The page turning item displays different styles according to whether the current page is displayed

    <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>

    Note : stl:yes and stl:no usually contain links, which can contain {Current.Url} and {Current.Num} entities, which represent the link address and current page number respectively.

  • Show combined flip labels (prev, number nav, and next) with css styles

    STL element structure:

    <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 Content tags

STL elements illustrate
stl:content Get the content value Display the attribute value of the specified content in the template through the stl:content tag
stl:contents content list Display the content list in the template through the stl:contents tag
stl:pageContents page flip content list Display the page-turning content list in the template through the stl:pageContents tag

stl:content tag

  • When the stl:content tag is used alone in the content template, the system will display the value of the current content by default

  • common attributes

    Attributes illustrate
    type display type
    no Show which item

  • 如果 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"Sort by hits
      • "hitsByDay"Sort by hits per day
      • "hitsByWeek"Sort by weekly hits
      • "hitsByMonth"Sort by monthly hits
      • "random"Show content randomly

    • Attributes starting with is

      There are two attribute values: true and false

      For example: if the property value of isHot is true, only hot content will be displayed; if the property value is false, only non-hot content will be displayed

      A few others like…

stl:pageContents tag

Display the page-turning content list in the template through the stl:pageContents tag

The stl:pageContents tag needs to be used in conjunction with the STL tags stl:pageItems and stl:pageItem

Usually the STL tags stl:pageItems and stl:pageItem are placed under the stl:pageContents tag, representing the page turning button.

stl:pageContents can only be used in column templates. If you need to use it in other types of templates, you must put the stl:pageContents tag and the corresponding stl:pageItems page turning tag in the stl:dynamic dynamic tag, otherwise the stl:pageContents tag will be could not be parsed.

Attributes

All members belonging to the STL tag stl:contents apply to the stl:pageContents tag, all members belonging to the HTML tag

The members of the stl:pageContents tag apply.

Attributes illustrate
pageNum Number of items displayed per page
maxPage The maximum number of generated static pages

Other attributes are the same as stl:contents tag attributes

Page turning container and page turning item label, see stl:pageChannels label column pagination description for details, use the same method

Example ===========

  • Display a list of content with pictures under the "News" section

    STL code:

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

    Parsed HTML code:

    <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>

  • Display the first 7 lists of all content under the column whose column index is "starting"

    STL code:

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

    Parsed HTML code:

    <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>

  • Display a list of all content under the current column, and a page-turning navigation is displayed below the list

    <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 Navigation tabs

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

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 https://sscms.com/docs/v6/stl/guide/elements.html#%E5%85%B6%E4%BB%96%E6%A0%87%E7%AD%BE

六、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 sets how many pieces of information are displayed in the list, and the default value is 0, which means displaying all information

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

  • startNum sets the number of information to start displaying in the list, and the default value is 1, which means displaying from the first information

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

  • pageNum Set the number of list items displayed on each page of the flipping list, the default value is 25

    This property works only for the flip list tags: stl:pageContents , stl:pageChannels and stl:pageSqlContents

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

  • maxPage Set the maximum number of pages displayed in the page turning list, the default value is 0, which means that the number of displayed pages is not controlled

    This attribute can be used to control the total number of pages when there are too many pages in the list, such as only listing the contents of the first 10 pages, so as to increase the speed of generating pages

    This property only works for flip list tags

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

9.2 stl:itemTemplate controls a specific item in the list

<stl:itemTemplate> List item sub-element label, controls the display effect of a specific item in the list

As follows: the content list is displayed alternately in different colors (zebra crossing effect)

<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>

Guess you like

Origin blog.csdn.net/qq_39335404/article/details/131759365
Recommended
Ranking
[Algorithm] greedy _ program scheduling issues
Spring 控制反转（IOC）
Data structure-6.6 figure
Indicates that the class or member method has abstract properties
Huawei v5 server installed Linux operating system
Postgresql source code analysis - creating ordinary tables
Chapter 10 Evaluation Classification Results
Cloud service Ubuntu 20.04 version uses Nginx to deploy static web pages
Java Exercise 17.1
Solve the problem that git cannot automatically push submission in IDEA Push failed: Failed with error: Could not read from remote repository.
Daily
More
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)

Code World

© 2018 codetd.com