STK提供两种导航菜单:水平导航和垂直导航。水平导航显示网站层级的第一、二级,垂直导航则显示第三、四级。显示的级别数是可以配置的。主页比较特别,尽管它在网站层级里级别更高,它在水平导航里只作为第一项显示。
配置导航
导航在模板原型里配置。原型为所有的页面定义导航菜单。
节点名 | 值 |
---|---|
default | |
templates | |
prototype | |
navigation | |
horizontal | |
allOpen | false |
enabled | true |
level | 1 |
template | /templating-kit/pages/global/horizontalNavigation.ftl |
vertical | |
allOpen | false |
enabled | true |
level | 2 |
startLevel | 2 |
template | /templating-kit/pages/global/verticalNavigation.ftl |
属性:
allOpen
: 当设置为true
时,所有可用的导航级别都被展开;当设置为false
时,新的级别会随着用户点击导航链接而展开。enabled
: 启用和禁用导航菜单。level
: 设置导航的深度,水平导航有效值有1
和2,
垂直导航的有效值为1,2,3
。参考下面的提示。startLevel
: 开启导航时的级别起点。通常垂直遵循水平,没有级别重叠。该属性可以让您在两种导航中显示同一个级别。template
: 到模板脚本的路径。vertical
和horizontal
节点引用它们自己的脚本。
任何具体模板定义都可以改写原型配置,您可以在某些页面上禁用菜单,或显示不同的级别。
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 /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:
Custom 2 + 2 configuration:
Navigation template script
Each navigation menu has its own template script which renders the menu 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.
[#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
allOpen false enabled true level 1 template /templating-kit/pages/global/horizontalNavigation.ftl vertical
allOpen false enabled true level 2 startLevel 2 template /templating-kit/pages/global/verticalNavigation.ftl
您可以设置大于3的
导航值,但这会导致CSS问题。需要在STK > 资源 /templating-kit/themes/pop/css
里编辑主CSS表styles.css
。
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.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