Versions Compared

Key

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

 

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

 

 

配置导航

 

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

 

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

 

属性: 

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

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

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

...

的主CSS表即可

更改显示级别

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

默认的 1+2 配置:

Image Added

经过定制的 2+2 配置:

Image Added

导航模板脚本

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

...

  • 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问题。需要在STK > 资源 /templating-kit/themes/pop/css编辑主CSS表styles.css

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

...