Page History
STK提供两种导航菜单：水平导航和垂直导航。水平导航显示网站层级的第一、二级，垂直导航则显示第三、四级。显示的级别数是可以配置的。主页比较特别，尽管它在网站层级里级别更高，它在水平导航里只作为第一项显示。
| Table of Contents |
|---|
配置导航
导航在模板原型里配置。原型为所有的页面定义导航菜单。
| Advanced Tables - Table Plus | |||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||
|
...
默认的 1+2 配置：
经过定制的 2+2 配置：
导航模板脚本
Each navigation menu has its own template script which renders the menu HTML:每个导航菜单都有自己的模板脚本，来绘制菜单的HTML形式：
- 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将原型和具体模板定义里的配置显示给脚本。
| 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] |
SiteNavigationModel exposes configuration made in the prototype and in concrete template definitions to the script.
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－old part----------------------------------------------------------
属性：
...
| heading | 0 |
|---|---|
| multiple | false |
| enableHeadingAttributes | false |
| enableSorting | false |
| class | m5-configuration-tree |
| enableHighlighting | false |
...
default
...
templates
...
prototype
...
navigation
...
horizontal
...
vertical
...
| Tip |
|---|
|
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导航菜单的不同设置：
- 缺省设置
...
Overview
Content Tools