菜单
概述
要为您的站点创建菜单
创建多个菜单，可以是扁平的也可以是嵌套的。 例如，为页眉创建主菜单，为页脚创建单独的菜单。
有三种方法可以定义菜单项
- 自动
- 在前置信息中
- 在站点配置中
自动定义
要为站点的每个顶级章节自动定义菜单项，请在站点配置中启用章节页面菜单。
hugo.
sectionPagesMenu: main
sectionPagesMenu = 'main'
{
"sectionPagesMenu": "main"
}
这将创建一个菜单结构，您可以在模板中使用 site.Menus.main 访问该结构。 有关详细信息，请参阅菜单模板。
在前置信息中定义
要将页面添加到“main”菜单
content/about.md
---
menus: main
title: About
---+++
menus = 'main'
title = 'About'
+++{
"menus": "main",
"title": "About"
}
在模板中使用 site.Menus.main 访问该条目。 有关详细信息，请参阅菜单模板。
要将页面添加到“main”和“footer”菜单
content/contact.md
---
menus:
- main
- footer
title: Contact
---+++
menus = ['main', 'footer']
title = 'Contact'
+++{
"menus": [
"main",
"footer"
],
"title": "Contact"
}
在模板中使用 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
---
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 访问该条目。 有关详细信息，请参阅菜单模板。
在站点配置中定义
要定义“main”菜单的条目
hugo.
menus:
main:
- name: Home
pageRef: /
weight: 10
- name: Products
pageRef: /products
weight: 20
- name: Services
pageRef: /services
weight: 30
[menus]
[[menus.main]]
name = 'Home'
pageRef = '/'
weight = 10
[[menus.main]]
name = 'Products'
pageRef = '/products'
weight = 20
[[menus.main]]
name = 'Services'
pageRef = '/services'
weight = 30
{
"menus": {
"main": [
{
"name": "Home",
"pageRef": "/",
"weight": 10
},
{
"name": "Products",
"pageRef": "/products",
"weight": 20
},
{
"name": "Services",
"pageRef": "/services",
"weight": 30
}
]
}
}
这将创建一个菜单结构，您可以在模板中使用 site.Menus.main 访问该结构。 有关详细信息，请参阅菜单模板。
要定义“footer”菜单的条目
hugo.
menus:
footer:
- name: Terms
pageRef: /terms
weight: 10
- name: Privacy
pageRef: /privacy
weight: 20
[menus]
[[menus.footer]]
name = 'Terms'
pageRef = '/terms'
weight = 10
[[menus.footer]]
name = 'Privacy'
pageRef = '/privacy'
weight = 20
{
"menus": {
"footer": [
{
"name": "Terms",
"pageRef": "/terms",
"weight": 10
},
{
"name": "Privacy",
"pageRef": "/privacy",
"weight": 20
}
]
}
}
这将创建一个菜单结构，您可以在模板中使用 site.Menus.footer 访问该结构。 有关详细信息，请参阅菜单模板。
属性
在站点配置中定义的每个菜单项都需要两个或多个属性
- 为内部链接指定
name和pageRef - 为外部链接指定
name和url
- pageRef
- （
string）目标页面的逻辑路径，相对于content目录。 省略语言代码和文件扩展名。 内部链接是必需的。
| Kind | pageRef |
|---|---|
| home | / |
| page | /books/book-1 |
| section | /books |
| taxonomy | /tags |
| term | /tags/foo |
- url
- （
string）外部链接是必需的。
示例
此嵌套菜单演示了一些可用的属性
hugo.
menus:
main:
- name: Products
pageRef: /products
weight: 10
- name: Hardware
pageRef: /products/hardware
parent: Products
weight: 1
- name: Software
pageRef: /products/software
parent: Products
weight: 2
- name: Services
pageRef: /services
weight: 20
- name: Hugo
params:
rel: external
pre: <i class="fa fa-heart"></i>
url: https://gohugo.com.cn/
weight: 30
[menus]
[[menus.main]]
name = 'Products'
pageRef = '/products'
weight = 10
[[menus.main]]
name = 'Hardware'
pageRef = '/products/hardware'
parent = 'Products'
weight = 1
[[menus.main]]
name = 'Software'
pageRef = '/products/software'
parent = 'Products'
weight = 2
[[menus.main]]
name = 'Services'
pageRef = '/services'
weight = 20
[[menus.main]]
name = 'Hugo'
pre = '<i class="fa fa-heart"></i>'
url = 'https://gohugo.com.cn/'
weight = 30
[menus.main.params]
rel = 'external'
{
"menus": {
"main": [
{
"name": "Products",
"pageRef": "/products",
"weight": 10
},
{
"name": "Hardware",
"pageRef": "/products/hardware",
"parent": "Products",
"weight": 1
},
{
"name": "Software",
"pageRef": "/products/software",
"parent": "Products",
"weight": 2
},
{
"name": "Services",
"pageRef": "/services",
"weight": 20
},
{
"name": "Hugo",
"params": {
"rel": "external"
},
"pre": "\u003ci class=\"fa fa-heart\"\u003e\u003c/i\u003e",
"url": "https://gohugo.com.cn/",
"weight": 30
}
]
}
}
这将创建一个菜单结构，您可以在模板中使用 site.Menus.main 访问该结构。 有关详细信息，请参阅菜单模板。
本地化 。
渲染
请参阅菜单模板。