菜单
Syntax
SITE.Menus
Returns
navigation.Menus
Site
对象上的 Menus
方法返回一个菜单对象集合,每个菜单都包含一个或多个条目,可以是扁平的或嵌套的。每个条目指向站点内的一个页面或外部资源。
一个网站可以有多个菜单。例如,一个主菜单和一个页脚菜单:
hugo.
menu:
footer:
- name: 法律声明
pageRef: /legal
weight: 10
- name: 隐私政策
pageRef: /privacy
weight: 20
main:
- name: 首页
pageRef: /
weight: 10
- name: 图书
pageRef: /books
weight: 20
- name: 电影
pageRef: /films
weight: 30
[menu]
[[menu.footer]]
name = '法律声明'
pageRef = '/legal'
weight = 10
[[menu.footer]]
name = '隐私政策'
pageRef = '/privacy'
weight = 20
[[menu.main]]
name = '首页'
pageRef = '/'
weight = 10
[[menu.main]]
name = '图书'
pageRef = '/books'
weight = 20
[[menu.main]]
name = '电影'
pageRef = '/films'
weight = 30
{
"menu": {
"footer": [
{
"name": "法律声明",
"pageRef": "/legal",
"weight": 10
},
{
"name": "隐私政策",
"pageRef": "/privacy",
"weight": 20
}
],
"main": [
{
"name": "首页",
"pageRef": "/",
"weight": 10
},
{
"name": "图书",
"pageRef": "/books",
"weight": 20
},
{
"name": "电影",
"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="/">首页</a>
<a href="/books/">图书</a>
<a href="/films/">电影</a>
</nav>
在查看"books"页面时,结果为:
<nav class="menu">
<a href="/">首页</a>
<a class="active" aria-current="page" href="/books/">图书</a>
<a href="/films/">电影</a>
</nav>
通常会使用局部模板呈现菜单。由于每个页面的活动菜单条目都不同,因此使用 partial
函数调用模板。不要使用 partialCached
函数。
上面的示例过于简单。请参阅菜单模板部分了解更多信息。