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。