菜单
Syntax
SITE.Menus
Returns
navigation.Menus
Site
对象上的 Menus
方法返回一个菜单集合,每个菜单包含一个或多个条目,可以是扁平的,也可以是嵌套的。每个条目指向站点内的页面或外部资源。
一个站点可以有多个菜单。例如,主菜单和页脚菜单:
hugo.
menus:
footer:
- name: Legal
pageRef: /legal
weight: 10
- name: Privacy
pageRef: /privacy
weight: 20
main:
- name: Home
pageRef: /
weight: 10
- name: Books
pageRef: /books
weight: 20
- name: Films
pageRef: /films
weight: 30
[menus]
[[menus.footer]]
name = 'Legal'
pageRef = '/legal'
weight = 10
[[menus.footer]]
name = 'Privacy'
pageRef = '/privacy'
weight = 20
[[menus.main]]
name = 'Home'
pageRef = '/'
weight = 10
[[menus.main]]
name = 'Books'
pageRef = '/books'
weight = 20
[[menus.main]]
name = 'Films'
pageRef = '/films'
weight = 30
{
"menus": {
"footer": [
{
"name": "Legal",
"pageRef": "/legal",
"weight": 10
},
{
"name": "Privacy",
"pageRef": "/privacy",
"weight": 20
}
],
"main": [
{
"name": "Home",
"pageRef": "/",
"weight": 10
},
{
"name": "Books",
"pageRef": "/books",
"weight": 20
},
{
"name": "Films",
"pageRef": "/films",
"weight": 30
}
]
}
}
此模板呈现主菜单:
{{ with site.Menus.main }}
<nav class="menu">
{{ range . }}
{{ if $.IsMenuCurrent .Menu . }}
<a class="active" aria-current="page" href="{{ .URL }}">{{ .Name }}</a>
{{ else }}
<a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
{{ end }}
</nav>
{{ end }}
查看主页时,结果为:
<nav class="menu">
<a class="active" aria-current="page" href="/">Home</a>
<a href="/books/">Books</a>
<a href="/films/">Films</a>
</nav>
查看“书籍”页面时,结果为:
<nav class="menu">
<a href="/">Home</a>
<a class="active" aria-current="page" href="/books/">Books</a>
<a href="/films/">Films</a>
</nav>
通常,您将使用局部模板来呈现菜单。由于活动菜单条目在每个页面上都不同,因此请使用 partial
函数来调用模板。请勿使用 partialCached
函数。
以上示例过于简单。请参阅 菜单模板 部分以了解更多信息。