Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

网站定义里,模板原型配置缺省的备用模板定义。它:

  • 定义全局缺省值,并且是以下内容的起点:
    • STK > 模板定义 /pages里配置的所有具体模板定义。
    • STK > 网站定义 /variations/<variation name>/templates节点下配置的所有模板变异形式。
  • 定义单个模板的基本结构,包括:
    • 水平和垂直导航的内容和行为。
    • 可用的区域以及它们的缺省行为。
    • 每个区域缺省可用的组件(如果有的话)。

每个在STK > 模板定义里配置的具体的页面模板有其独特之处。模板原型定义了在大多数模板里很有可能被用到的设置。这使得配置更高效,因为在页面模板定义里只需要定义例外情况就行了。例如,平台区域原型里默认是禁用的。此区域不被任何具体的模板使用,但对于页面来说是一个不错的附加。它可以通过添加一个简单的节点来启用。

Table of Contents

模板合并

在页面被请求时,模板原型与具体模板合并。下面的例子展示了合并在stkHome页面模板里是如何发生的。注意mainextras区域。

  1. 模板原型是最基本的配置。它为模板原型是最基本的配置。它不仅为mainextras区域定义必需的属性来使它们在所有页面上工作。原型也定义它们的子区域(没有体现在图表中)。区域定义必需的属性,使它们在所有页面上工作,还可定义它们的子区域(没有体现在图表中)。
  2. stkHome是具体的模板定义,从模板原型继承了基础区域配置。一个具体的定义可以添加或覆写继承的所有配置。例如,floating配置被添加到配置原本不在原型里,但被添加到了main区域。这原本不在原型中。区域。templateScript属性就是覆写的一个例子。具体定义包括该属性,但提供了一个不同的值,它使用一个不同的为章节页剪裁的属性是覆写的一个例子,具体定义里含有该属性,但设置了一个不同的值。具体定义还使用了另一个为章节页剪裁的mainArea.ftl脚本。extras区域的enabled属性被设置为false,使该区域被禁用
  3. 结果是原型和具体定义的合并。它以最终结果是原型和具体定义的合并。它以def模板支持对象形式呈现给模板脚本。这就意味着脚本可以用形式呈现给模板脚本,这就意味着脚本可以用${def.propertyName}获得属性的值。

...

  • templateScript属性引用主页面模板脚本,main.ftl这使脚本对所有在STK > 模板定义 /pages里定义的具体模板定义都可用。
  • navigation节点包含缺省的导航配置
  • areas节点包含区域配置
  • jsFilescssFiles节点可以用来提供额外JavaScript功能和CSS样式。由于缺省主题包含所有必要的内容,这些节点没有在演示网站里应用,但如果需要的话也是可用的。由于默认主题包含所有必要的内容,这些节点没有在演示网站里应用,但如果需要的话也是可用的。

    Advanced Tables - Table Plus
    heading0
    multiplefalse
    enableHeadingAttributesfalse
    enableSortingfalse
    classm5-configuration-tree
    enableHighlightingfalse
    节点名

    default

     

    templates

     

    prototype

     

    navigation

     

    areas

     

    jsFiles

     

    cssFiles

     

    Paragraph

    templateScript

    /templating-kit/pages/main.ftl

    availability

     

导航配置

缺省情况下,STK支持2个级别的水平导航和3个级别的垂直导航,但这是可以配置的。一级水平导航包含主页和章节页,也就是网站层级里的级别1和2。在那之后级别遵循网站层级。例如,当您设置水平导航显示两个级别,层级1(主页),2(章节),和3被水平显示。层级4,5,6则被垂直显示。默认情况下,STK支持2个级别的水平导航和3个级别的垂直导航,但这是可以配置的。第一级水平导航包含主页和章节页,也就是网站层级里的级别1和2。在那之后,级别遵循网站层级。例如,当您设置水平导航显示两个级别时,层级1(主页),2(章节),和3被水平显示,层级4,5,6则被垂直显示。

属性:

  • allOpen:当被设置为当设置为true时,所有可用的导航级别都被展开。当设置为false时,新的级别会随着用户点击导航链接而被展开。时,新的级别会随着用户点击导航链接而展开。
  • enabled:启用和禁用导航菜单。
  • level:设置导航的深度。可用的选项为水平方向12, 垂直方向3。
  • startLevel开启导航时的级别起点。通常垂直遵循水平,没有级别重叠。例如,该属性可以让您在两种导航中显示级别。开启导航时的级别起点。通常垂直遵循水平,没有级别重叠。该属性可以让您在两种导航中显示同一个级别。 
  • template:到模板脚本的路径。verticalhorizontal节点引用它们自己的脚本。

    Advanced Tables - Table Plus
    heading0
    multiplefalse
    enableHeadingAttributesfalse
    enableSortingfalse
    classm5-configuration-tree
    enableHighlightingfalse
    节点名

    default

     

    templates

     

    prototype

     

    navigation

     

    horizontal

     

    Paragraph

    allOpen

    false

    Paragraph

    enabled

    true

    Paragraph

    level

    1

    Paragraph

    template

    /templating-kit/pages/global/horizontalNavigation.ftl

    vertical

     

    Paragraph

    allOpen

    false

    Paragraph

    enabled

    true

    Paragraph

    level

    2

    Paragraph

    startLevel

     2

    Paragraph

    template

     /templating-kit/pages/global/verticalNavigation.ftl
Tip

您可以设置导航值大于3,但这会导致CSS问题。您可以设置大于3的导航值,但这会导致CSS问题。需要STK > 资源 /templating-kit/themes/pop/css可编辑主CSS表编辑主CSS表styles.css

网站导航模型SiteNavigationModel将配置属性显示给绘制垂直和水平导航的脚本。脚本在STK > 资源 /templating-kit/pages/global/horizontalNavigation.ftl/verticalNavigation.ftl里。以下为水平脚本的片段。

Code Block
[#if model.navigation.showHorizontalNavigation]
    [#assign navigation = model.navigation.horizontalNavigation/]
    [#if (model.navigation.horizontalLevel >1 && navigation.selectedItem??) && (navigation.selectedItem.level>1 || !navigation.selectedItem.leaf)]
        [#assign cssClass = "class=\"plus-navsub\""]
    [/#if]
    <div id="nav-global" ${cssClass!} role="navigation">
        <div id="nav-global-box">
            <h6>${i18n['structural.navigation']}</h6>
            [@renderNavigation navigation=navigation/]
        </div><!-- end nav-global-box -->
    </div><!-- end nav-global -->
[/#if]

以下为不同设置的以下为demo-project导航菜单:导航菜单的不同设置:

  • 缺省设置

  • horizontal/level属性设置为2 

区域配置

区域定义在模板原型页面定义里配置。区域定义在模板原型的页面定义里配置。STK > 网站定义 /default/templates/prototype/areas内容节点包含可用的页面区域的定义。区域被作内容地图用。区域定义使区域对模板可用,定义区域的行为,以及哪些组件(如果有的话)在区域里可用。内容节点包含可用的页面区域的定义。区域可作为内容映射。区域定义使区域对模板可用,定义区域的行为,以及哪些组件(如果有的话)在区域里可用。

本小节提供了区域定义配置的概述。STK区域页有更为深层的关于每个STK区域的讨论。

...

原型模板定义可用的区域。单个具体模板使用大多数但非全部的区域。

页面脚本,main.ftl,决定了区域绘制的顺序,以及在哪里落入包装(,决定了区域绘制的顺序,以及在哪里落入边框(wrappers)内。这使得区域节点顺序在配置中变得不重要。区域被包含在页面脚本中,使用。这样,区域节点顺序在配置中就变得不重要了。页面脚本使用[cms.area name="<area name>"]标签。标签来引用区域。

在以下表格中,您可以看到在原型中配置的父区域以及页面上区域的位置和包装。在以下表格中,您可以看到在原型中配置的父区域,以及页面上区域的位置和边框。

Section
Column
Advanced Tables - Table Plus
heading0
multiplefalse
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名

default

templates

prototype

areas

htmlHeader

platform

main

extras

promos

base

footer

branding

sectionHeader

stage

Column

简单来说,每个区域都有以下内容和功能。参看STK区域页里更为详尽的讨论。

  • htmlHeader在HTML的head元件里插入管理元件以表示关键词、描述等,创建标题元件,以及到样式表和JavaScript的链接。元件里插入管理元件,用来表示关键词、描述等,创建标题元件,以及到样式表和JavaScript的链接。
  • branding包含标志,品牌口号,搜索框,以及内部登录链接。包含标志、品牌口号、搜索框以及内部登录链接。
  • sectionHeader只在章节页面上使用,包含章节的横幅正文,并被所有子页面继承,除非特意配置。只在章节页面上使用,包含章节的横幅正文。除非特意配置,否则sectionHeader会被所有子页面继承。
  • stage只在主页使用,包含一个较大的要点组件。
  • platform不被使用,但可以添加到任何模板,包含一个页面要点。
  • main包含页面的主要内容。在一个文章页面,主内容为文章故事,在新闻页面则为新闻项等。在章节页面和主页上,主内容为链接到内容页面的要点。包含页面的主要内容。用在一个文章页面时,主内容为文章故事,在新闻页面时则为新闻项等。在章节页面和主页上,主内容为链接到内容页面的要点。
  • extras为要点组件而使用。通常这些都与主内容有关。例如,如果主内容是事件,附加物可以是为要点组件而使用。通常这些都与主内容有关。例如,如果主内容是事件,那么附加物可以是日历通信录以及新事件要点组件,提供一个可点击的日历,通信录信息和一个即将发生的事件列表。要点组件,提供一个可点击的日历、通信录信息和一个即将发生的事件列表。
  • promos通常被用来推广特殊事件或交易。窗口够宽时,该区域浮在mainextras右方;窗口较窄时,则会在下方。
  • base占用页面的整个宽度,可包含一个大的圆盘幻灯片或分类云组件。
  • footer包含链接,样板文件和版权声明。包含链接、样板文件和版权声明。

嵌套区域

区域可以包含嵌套的子区域,而子区域可反过来有它们自己的嵌套区域。嵌套区域在/default/templates/areas/<parent area name>/areas/<child area name>节点下配置。第二(或第三)个areas内容节点名识别子配置为一个区域。父区域和子区域支持相同的属性和配置选项。

...