Hugo 菜單
通過定義菜單條目、本地化每個條目並渲染生成的數據結構來創建菜單。
概述
為站點創建菜單：
- 定義菜單條目
- 本地化 每個條目
- 使用 [模板] 渲染菜單
創建多個菜單，可以是扁平結構或嵌套結構。例如，為頁眉創建主菜單，為頁腳創建單獨的菜單。
有三種方法可以定義菜單條目：
- 自動定義
- 在 front matter 中定義
- 在站點配置中定義
雖然在定義菜單時可以組合使用這些方法，但如果在整個站點中使用一種方法，菜單將更易於概念化和維護。
自動定義
要為站點的每個頂層 section 自動定義菜單條目，在站點配置中啟用 section 頁面菜單。
sectionPagesMenu: main
sectionPagesMenu = 'main'
{
"sectionPagesMenu": "main"
}
這將創建一個菜單結構，你可以在模板中使用 site.Menus.main 訪問。有關詳細信息，請參閱 menu templates。
在 front matter 中定義
要將頁面添加到"main"菜單：
---
menus: main
title: About
---+++
menus = 'main'
title = 'About'
+++{
"menus": "main",
"title": "About"
}
在模板中使用 site.Menus.main 訪問條目。有關詳細信息，請參閱 menu templates。
要將頁面添加到"main"和"footer"菜單：
---
menus:
- main
- footer
title: Contact
---+++
menus = ['main', 'footer']
title = 'Contact'
+++{
"menus": [
"main",
"footer"
],
"title": "Contact"
}
在模板中使用 site.Menus.main 和 site.Menus.footer 訪問條目。有關詳細信息，請參閱 menu templates。
上面示例中的配置鍵是 menus。menu（單數）配置鍵是 menus 的別名。
屬性
在 front matter 中定義菜單條目時使用這些屬性：
- identifier
- (
string) 當兩個或更多菜單條目具有相同的name時必需，或使用翻譯表本地化name時必需。必須以字母開頭，後跟字母、數字或下劃線。 - name
- (
string) 渲染菜單條目時顯示的文本。 - params
- (
map) 菜單條目的用戶定義屬性。 - parent
- (
string) 父菜單條目的identifier。如果未定義identifier，則使用name。嵌套菜單中的子條目必需。 - post
- (
string) 渲染菜單條目時追加的 HTML。 - pre
- (
string) 渲染菜單條目時前置的 HTML。 - title
- (
string) 渲染後的菜單條目的 HTMLtitle屬性。 - weight
- (
int) 一個非零整數，表示條目相對於菜單根目錄的位置，或對於子條目相對於其父條目的位置。較輕的條目浮到頂部，較重的條目沉到底部。
示例
此 front matter 菜單條目演示了一些可用屬性：
---
menus:
main:
params:
class: center
parent: Products
pre: <i class="fa-solid fa-code"></i>
weight: 20
title: Software
---+++
title = 'Software'
[menus]
[menus.main]
parent = 'Products'
pre = '<i class="fa-solid fa-code"></i>'
weight = 20
[menus.main.params]
class = 'center'
+++{
"menus": {
"main": {
"params": {
"class": "center"
},
"parent": "Products",
"pre": "\u003ci class=\"fa-solid fa-code\"\u003e\u003c/i\u003e",
"weight": 20
}
},
"title": "Software"
}
在模板中使用 site.Menus.main 訪問條目。有關詳細信息，請參閱 menu templates。
在站點配置中定義
請參閱 configure menus。
本地化
Hugo 提供兩種方法來本地化菜單條目。請參閱 multilingual。
渲染
請參閱 menu templates。