頁頭菜單

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}