页头菜单

2023年2月17日 3 分钟阅读模块页头文档菜单页头菜单

赞助

成为我们的资助者或赞助商，以支持我们的工作。

本页内容

赞助商

本文将介绍如何配置页头菜单。

页头菜单最大的深度为三级。

菜单集标识

页头菜单集标识为 main。

页头菜单项参数

Parameter	Type	Description
`header`	string	下拉菜单的标题，只作用于顶级菜单。
`divider`	boolean	为 `true` 时，作为分隔符显示，请参阅分割符。
`description`	string	子菜单的描述，默认为页面描述。
`columns`	number	子菜单的列数，最大为 `2`，当菜单数目小于 `6` 时，默认为 `1`，否则为 `2`。
`icon`	object	图标参数。
`icon.vendor`	string	图标供应商，必填。
`icon.name`	string	图标名称，必填。
`icon.color`	string	图标颜色。
`icon.className`	string	图标 CSS 类名。
`target`	string	链接 target 属性。
`rel`	string	链接 rel 属性。

详情请参阅菜单配置和图标配置。

分割符

顶级菜单分隔符

如果顶级菜单项的 divider 参数设置为 true，则当前菜单项将成为分隔符项，不会显示文本和链接。

您必须为分隔符指定 name 或 identifier，以使每个分隔符唯一。

次级菜单分隔符

如果二级菜单条目启用了 divider 参数，则分隔符将附加到菜单末尾。

Example

页头菜单示例

menus.toml

 1[[main]]
 2  name = 'Home'
 3  url = '/'
 4  weight = 1
 5  [main.params]
 6    [main.params.icon]
 7      name = 'house'
 8      vendor = 'bootstrap'
 9[[main]]
10  identifier = 'foobar'
11  name = 'FooBar'
12  [main.params]
13    header = 'The header of FooBar'
14    [main.params.icon]
15      name = 'rocket-takeoff'
16      vendor = 'bootstrap'
17[[main]]
18  name = 'Foo'
19  parent = 'foobar'
20  url = '#foo'
21  weight = 1
22  [main.params]
23    description = 'Foo description.'
24    [main.params.icon]
25      color = 'red'
26      name = 'heart-fill'
27      vendor = 'bootstrap'
28[[main]]
29  parent = 'foobar'
30  weight = 2
31  [main.params]
32    divider = true
33[[main]]
34  name = 'Bar'
35  parent = 'foobar'
36  url = '#bar'
37  weight = 3
38  [main.params]
39    description = 'Bar description.'
40    [main.params.icon]
41      color = '#198754'
42      name = 'toggle-off'
43      vendor = 'bootstrap'

menus.yaml

 1main:
 2- name: Home
 3  params:
 4    icon:
 5      name: house
 6      vendor: bootstrap
 7  url: /
 8  weight: 1
 9- identifier: foobar
10  name: FooBar
11  params:
12    header: The header of FooBar
13    icon:
14      name: rocket-takeoff
15      vendor: bootstrap
16- name: Foo
17  params:
18    description: Foo description.
19    icon:
20      color: red
21      name: heart-fill
22      vendor: bootstrap
23  parent: foobar
24  url: '#foo'
25  weight: 1
26- params:
27    divider: true
28  parent: foobar
29  weight: 2
30- name: Bar
31  params:
32    description: Bar description.
33    icon:
34      color: '#198754'
35      name: toggle-off
36      vendor: bootstrap
37  parent: foobar
38  url: '#bar'
39  weight: 3

menus.json

 1{
 2   "main": [
 3      {
 4         "name": "Home",
 5         "params": {
 6            "icon": {
 7               "name": "house",
 8               "vendor": "bootstrap"
 9            }
10         },
11         "url": "/",
12         "weight": 1
13      },
14      {
15         "identifier": "foobar",
16         "name": "FooBar",
17         "params": {
18            "header": "The header of FooBar",
19            "icon": {
20               "name": "rocket-takeoff",
21               "vendor": "bootstrap"
22            }
23         }
24      },
25      {
26         "name": "Foo",
27         "params": {
28            "description": "Foo description.",
29            "icon": {
30               "color": "red",
31               "name": "heart-fill",
32               "vendor": "bootstrap"
33            }
34         },
35         "parent": "foobar",
36         "url": "#foo",
37         "weight": 1
38      },
39      {
40         "params": {
41            "divider": true
42         },
43         "parent": "foobar",
44         "weight": 2
45      },
46      {
47         "name": "Bar",
48         "params": {
49            "description": "Bar description.",
50            "icon": {
51               "color": "#198754",
52               "name": "toggle-off",
53               "vendor": "bootstrap"
54            }
55         },
56         "parent": "foobar",
57         "url": "#bar",
58         "weight": 3
59      }
60   ]
61}