菜单
概述
创建网站菜单的方法：
创建多个菜单，可以是扁平的，也可以是嵌套的。例如，为页眉创建一个主菜单，为页脚创建一个单独的菜单。
定义菜单项有三种方法：
- 自动定义
- 在前置 matter 中定义
- 在站点配置中定义
自动定义
要为网站的每个顶级 章节 自动定义菜单项，请在站点配置中启用章节页面菜单。
hugo.
sectionPagesMenu: main
sectionPagesMenu = 'main'
{
"sectionPagesMenu": "main"
}
这将创建一个菜单结构，您可以在模板中使用 site.Menus.main 访问它。详情请参见 菜单模板 。
在前置 matter 中定义
要将页面添加到“main”菜单：
content/about.md
---
menus: main
title: 关于
---+++
menus = 'main'
title = '关于'
+++{
"menus": "main",
"title": "关于"
}
在模板中使用 site.Menus.main 访问该条目。详情请参见 菜单模板 。
要将页面添加到“main”和“footer”菜单：
content/contact.md
---
menus:
- main
- footer
title: 联系
---+++
menus = ['main', 'footer']
title = '联系'
+++{
"menus": [
"main",
"footer"
],
"title": "联系"
}
在模板中使用 site.Menus.main 和 site.Menus.footer 访问该条目。详情请参见 菜单模板 。
属性
在前置 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) 一个非零整数，指示条目相对于菜单根目录的位置，或者对于子条目相对于其父项的位置。较轻的条目浮在顶部，较重的条目沉到底部。
示例
此前置 matter 菜单项演示了一些可用的属性：
content/products/software.md
---
menus:
main:
params:
class: center
parent: 产品
pre: <i class="fa-solid fa-code"></i>
weight: 20
title: 软件
---+++
title = '软件'
[menus]
[menus.main]
parent = '产品'
pre = '<i class="fa-solid fa-code"></i>'
weight = 20
[menus.main.params]
class = 'center'
+++{
"menus": {
"main": {
"params": {
"class": "center"
},
"parent": "产品",
"pre": "\u003ci class=\"fa-solid fa-code\"\u003e\u003c/i\u003e",
"weight": 20
}
},
"title": "软件"
}
在模板中使用 site.Menus.main 访问该条目。详情请参见 菜单模板 。
在站点配置中定义
要为“main”菜单定义条目：
hugo.
menus:
main:
- name: 首页
pageRef: /
weight: 10
- name: 产品
pageRef: /products
weight: 20
- name: 服务
pageRef: /services
weight: 30
[menus]
[[menus.main]]
name = '首页'
pageRef = '/'
weight = 10
[[menus.main]]
name = '产品'
pageRef = '/products'
weight = 20
[[menus.main]]
name = '服务'
pageRef = '/services'
weight = 30
{
"menus": {
"main": [
{
"name": "首页",
"pageRef": "/",
"weight": 10
},
{
"name": "产品",
"pageRef": "/products",
"weight": 20
},
{
"name": "服务",
"pageRef": "/services",
"weight": 30
}
]
}
}
这将创建一个菜单结构，您可以在模板中使用 site.Menus.main 访问它。详情请参见 菜单模板 。
要为“footer”菜单定义条目：
hugo.
menus:
footer:
- name: 条款
pageRef: /terms
weight: 10
- name: 隐私
pageRef: /privacy
weight: 20
[menus]
[[menus.footer]]
name = '条款'
pageRef = '/terms'
weight = 10
[[menus.footer]]
name = '隐私'
pageRef = '/privacy'
weight = 20
{
"menus": {
"footer": [
{
"name": "条款",
"pageRef": "/terms",
"weight": 10
},
{
"name": "隐私",
"pageRef": "/privacy",
"weight": 20
}
]
}
}
这将创建一个菜单结构，您可以在模板中使用 site.Menus.footer 访问它。详情请参见 菜单模板 。
属性
在站点配置中定义的每个菜单项都需要两个或多个属性：
- 为内部链接指定
name和pageRef - 为外部链接指定
name和url
- pageRef
- (
string) 目标页面的逻辑路径，相对于content目录。省略语言代码和文件扩展名。内部 链接需要此属性。
| 种类 | pageRef |
|---|---|
| 首页 | / |
| 页面 | /books/book-1 |
| 章节 | /books |
| 分类 | /tags |
| 术语 | /tags/foo |
- url
- (
string) 外部链接 需要此属性。
示例
此嵌套菜单演示了一些可用的属性：
hugo.
menus:
main:
- name: 产品
pageRef: /products
weight: 10
- name: 硬件
pageRef: /products/hardware
parent: 产品
weight: 1
- name: 软件
pageRef: /products/software
parent: 产品
weight: 2
- name: 服务
pageRef: /services
weight: 20
- name: Hugo
params:
rel: external
pre: <i class="fa fa-heart"></i>
url: https://gohugo.io/
weight: 30
[menus]
[[menus.main]]
name = '产品'
pageRef = '/products'
weight = 10
[[menus.main]]
name = '硬件'
pageRef = '/products/hardware'
parent = '产品'
weight = 1
[[menus.main]]
name = '软件'
pageRef = '/products/software'
parent = '产品'
weight = 2
[[menus.main]]
name = '服务'
pageRef = '/services'
weight = 20
[[menus.main]]
name = 'Hugo'
pre = '<i class="fa fa-heart"></i>'
url = 'https://gohugo.io/'
weight = 30
[menus.main.params]
rel = 'external'
{
"menus": {
"main": [
{
"name": "产品",
"pageRef": "/products",
"weight": 10
},
{
"name": "硬件",
"pageRef": "/products/hardware",
"parent": "产品",
"weight": 1
},
{
"name": "软件",
"pageRef": "/products/software",
"parent": "产品",
"weight": 2
},
{
"name": "服务",
"pageRef": "/services",
"weight": 20
},
{
"name": "Hugo",
"params": {
"rel": "external"
},
"pre": "\u003ci class=\"fa fa-heart\"\u003e\u003c/i\u003e",
"url": "https://gohugo.io/",
"weight": 30
}
]
}
}
这将创建一个菜单结构，您可以在模板中使用 site.Menus.main 访问它。详情请参见 菜单模板 。
本地化
Hugo 提供两种方法来本地化您的菜单项。参见 多语言 。
渲染
参见 菜单模板 。