菜单
语法
SITE.Menus
返回
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>
当查看“books”页面时,结果是
<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
函数。
上面的示例很简单。请参阅菜单模板部分,了解更多信息。