菜单
概述
创建网站菜单的步骤如下：
- 定义菜单条目
- 对每个条目进行本地化
- 使用 [模板] 呈现菜单
可以创建多个菜单，包括平级菜单和嵌套菜单。例如，为页眉创建一个主菜单，为页脚创建一个单独的菜单。
有三种方式可以定义菜单条目：
- 自动定义
- 在正文区域设置
- 在网站配置中设置
自动定义
要为网站的每个顶级页面自动定义菜单条目，请在网站配置中启用页面菜单。
hugo.
sectionPagesMenu: main
sectionPagesMenu = 'main'
{
"sectionPagesMenu": "main"
}
这将创建一个菜单结构，可以在模板中通过 site.Menus.main 访问。详见[菜单模板]的细节。
在正文区域设置
要将页面添加到 “main” 菜单中：
content/about.md
---
menu: main
title: 关于
---+++
menu = 'main'
title = '关于'
+++{
"menu": "main",
"title": "关于"
}
在模板中通过 site.Menus.main 访问该条目。详见[菜单模板]的细节。
要将页面同时添加到 “main” 和 “footer” 菜单中：
content/contact.md
---
menu:
- main
- footer
title: 联系我们
---+++
menu = ['main', 'footer']
title = '联系我们'
+++{
"menu": [
"main",
"footer"
],
"title": "联系我们"
}
在模板中通过 site.Menus.main 和 site.Menus.footer 访问该条目。详见[菜单模板]的细节。
属性
在正文区域中定义菜单条目时可使用以下属性：
- identifier
- (
string) 当两个或多个菜单条目具有相同的name或者当使用翻译表对name进行本地化时，该属性是必需的。必须以字母开头，后跟字母、数字或下划线。 - name
- (
string) 在呈现菜单条目时显示的文本内容。 - params
- (
map) 根据用户需要定义的菜单条目属性。 - parent
- (
string) 父菜单条目的identifier。如果未定义identifier，则使用name。嵌套菜单的子条目中必需的属性。 - post
- (
string) 在呈现菜单条目时追加的 HTML。 - pre
- (
string) 在呈现菜单条目时前置的 HTML。 - title
- (
string) 呈现菜单条目时的 HTMLtitle属性。 - weight
- (
int) 非零整数，表示条目在菜单中相对于根目录的位置，或者对于子条目表示相对于其父目录的位置。较轻的条目浮动到顶部，较重的条目下沉到底部。
示例
以下正文区域的菜单条目演示了一些可用属性：
content/products/software.md
---
menu:
main:
params:
class: center
parent: 产品
pre: <i class="fa-solid fa-code"></i>
weight: 20
title: 软件
---+++
title = '软件'
[menu]
[menu.main]
parent = '产品'
pre = '<i class="fa-solid fa-code"></i>'
weight = 20
[menu.main.params]
class = 'center'
+++{
"menu": {
"main": {
"params": {
"class": "center"
},
"parent": "产品",
"pre": "\u003ci class=\"fa-solid fa-code\"\u003e\u003c/i\u003e",
"weight": 20
}
},
"title": "软件"
}
在模板中通过 site.Menus.main 访问该条目。详见[菜单模板]的细节。
在网站配置中设置
要为 “main” 菜单设定条目：
hugo.
menu:
main:
- name: 主页
pageRef: /
weight: 10
- name: 产品
pageRef: /products
weight: 20
- name: 服务
pageRef: /services
weight: 30
[menu]
[[menu.main]]
name = '主页'
pageRef = '/'
weight = 10
[[menu.main]]
name = '产品'
pageRef = '/products'
weight = 20
[[menu.main]]
name = '服务'
pageRef = '/services'
weight = 30
{
"menu": {
"main": [
{
"name": "主页",
"pageRef": "/",
"weight": 10
},
{
"name": "产品",
"pageRef": "/products",
"weight": 20
},
{
"name": "服务",
"pageRef": "/services",
"weight": 30
}
]
}
}
这将创建一个菜单结构，可以在模板中通过 site.Menus.main 访问。详见[菜单模板]的细节。
要为 “footer” 菜单设定条目：
hugo.
menu:
footer:
- name: 条款
pageRef: /terms
weight: 10
- name: 隐私
pageRef: /privacy
weight: 20
[menu]
[[menu.footer]]
name = '条款'
pageRef = '/terms'
weight = 10
[[menu.footer]]
name = '隐私'
pageRef = '/privacy'
weight = 20
{
"menu": {
"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.
menu:
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
[menu]
[[menu.main]]
name = '产品'
pageRef = '/products'
weight = 10
[[menu.main]]
name = '硬件'
pageRef = '/products/hardware'
parent = '产品'
weight = 1
[[menu.main]]
name = '软件'
pageRef = '/products/software'
parent = '产品'
weight = 2
[[menu.main]]
name = '服务'
pageRef = '/services'
weight = 20
[[menu.main]]
name = 'Hugo'
pre = '<i class="fa fa-heart"></i>'
url = 'https://gohugo.io/'
weight = 30
[menu.main.params]
rel = 'external'
{
"menu": {
"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 提供了两种本地化菜单条目的方法。详见 [多语言]。
呈现
详见[菜单模板]。