You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

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

属性:

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

    节点名

    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 

  • No labels