Page History

STK提供两种导航菜单：水平导航和垂直导航。水平导航显示网站层级的第一、二级，垂直导航则显示第三、四级。显示的级别数是可以配置的。主页比较特别，尽管它在网站层级里级别更高，它在水平导航里只作为第一项显示。 

配置导航

...

导航在模板原型里配置。原型为所有的页面定义导航菜单。 

Advanced Tables - Table Plus
heading 0 multiple false enableHeadingAttributes false enableSorting false class m5-configuration-tree enableHighlighting false
节点名 值 Mgnl n default   Mgnl n templates   Mgnl n prototype   Mgnl n navigation   Mgnl n horizontal   mgnl-p allOpen false mgnl-p enabled true mgnl-p level 1 mgnl-p template /templating-kit/pages/global/horizontalNavigation.ftl Mgnl n vertical   mgnl-p allOpen false mgnl-p enabled true mgnl-p level 2 mgnl-p startLevel  2 mgnl-p template  /templating-kit/pages/global/verticalNavigation.ftl

...

属性： 

• allOpen: 当设置为true时，所有可用的导航级别都被展开；当设置为false时，新的级别会随着用户点击导航链接而展开。
• enabled: 启用和禁用导航菜单。
• level: 设置导航的深度，水平导航有效值有1和2，垂直导航的有效值为1，2，3。参考下面的提示。
• startLevel: 开启导航时的级别起点。通常垂直遵循水平，没有级别重叠。该属性可以让您在两种导航中显示同一个级别。
• template: 到模板脚本的路径。vertical和horizontal节点引用它们自己的脚本。

任何具体模板定义都可以改写原型配置，您可以在某些页面上禁用菜单，或显示不同的级别。

Tip
You can set the navigation level to greater than 3 but you will run into CSS issues. To fix the broken layout, edit the main CSS sheet in STK > Resources 您可以将导航级别设置为大于3的值，但这会导致CSS问题。要解决这个布局问题，编辑STK > 资源 /templating-kit/themes/pop/css/styles.

Changing display levels

You can change the default 1 + 2 level configuration. For example, when you set the horizontal level to 2, the system displays hierarchy levels 1 (home), 2 and 3 in the horizontal menu. Levels below 3 are displayed vertically.

Default 1 + 2 configuration:

Image Removed

Custom 2 + 2 configuration:

Image Removed

Navigation template script

Each navigation menu has its own template script which renders the menu HTML:

更改显示级别

您可以更改默认的 1+2 级配置。例如，当您将水平级别（level）设置为2时，系统在水平导航里显示层级1（主页），2和3；低于3的级别则会垂直显示。

默认的 1+2 配置：

Image Added

经过定制的 2+2 配置：

Image Added

导航模板脚本

每个导航菜单都有自己的模板脚本，来绘制菜单的HTML形式：

• STK > 模板 STK > Templates > /templating-kit/pages/global/horizontalNavigation.ftl
• STK > Templates 模板 > /templating-kit/pages/global/verticalNavigation.ftl

Here's a snippet from the horizontal script.这是水平导航脚本里的代码片段。SiteNavigationModel将原型和具体模板定义里的配置显示给脚本。

[#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]

SiteNavigationModel exposes configuration made in the prototype and in concrete template definitions to the script.

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－old part----------------------------------------------------------

属性：

...

...

default

...

templates

...

prototype

...

navigation

...

horizontal

...

vertical

...

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

[#if model.navigation.showHorizontalNavigation]
    [#assign navigation = model.navigation.horizontalNavigation/]
    [#if (model.navigation.horizontalLevel >1 && navigation.selectedItem??) && (navigation.selectedItemamp;& (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导航菜单的不同设置：

• 缺省设置
  

  Image Removed

...