菜單

我們預定義了兩種類型的菜單:mainfooter,分別表示頂部的應用程序欄菜單和頁腳菜單。 本文將簡要介紹如何使用菜單。

菜單項屬性

屬性 類型 描述
name String 菜單名稱。
identifier String 菜單 ID。
weight Number 菜單的權重,用於升序排序。
parent String 上級菜單的 identifier
url String 菜單的 URL。
pre String 菜單名稱的前置字符串。
post String 菜單名稱的拖尾字符串。
params Object 菜單參數。
params.divider Boolean true 表示分隔符。

請參閱 Menu Entry Properties

用法

配置

菜單配置文件默認放在 config/_default/menu.toml

讓我們以 main 菜單為例:

 1[[main]]
 2  name = "FooBar"
 3  identifier = "foobar"
 4  weight = 1
 5  pre = '<i class="fas fa-fw fa-chevron-circle-down"></i>'
 6[[main]]
 7  name = "Foo"
 8  identifier = "foo"
 9  parent = "foobar"
10  url = "https://github.com/razonyang/hugo-theme-bootstrap"
11  weight = 1
12[[main]]
13  parent = "foobar"
14  identifier = "foobar-divider"
15  weight = 2
16  [main.params]
17    divider = true
18[[main]]
19  name = "Bar"
20  identifier = "bar"
21  parent = "foobar"
22  url = "https://github.com/razonyang/hugo-theme-bootstrap/discussions/new"
23  weight = 3

Main Menus

如圖所示,我們創建一個名為 foobar 的頂級菜單,其包含了子菜單和分隔符。

Front Matter

我們也可以通過頁面的 Front Matter 配置菜單。

1[menu.main]
2  parent = "support"
3  weight = 6
4[menu.footer]
5  parent = "support"
6  weight = 6
7  pre = '<i class="fas fa-fw fa-quetion-circle"></i>'

代碼片段將頁面追加到 mainfooter 菜單。

不需要指定 urlname 參數。

版權

評論