菜单模板
https://gohugo.io/templates/menu-templates/
在您的模板中使用菜单变量和方法来渲染菜单。
概述
在定义菜单条目之后,使用菜单变量和方法来渲染菜单。
有三个因素决定如何渲染菜单:
- 定义菜单条目的方法:自动定义、在前置元数据中定义或在站点配置中定义
- 菜单结构:平面或嵌套
- 用于本地化菜单条目的方法:站点配置或翻译表
下面的示例处理了每种组合。
示例
这个局部模板递归地"遍历"菜单结构,渲染本地化、可访问的嵌套列表。
layouts/partials/menu.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| {{- $page := .page }}
{{- $menuID := .menuID }}
{{- with index site.Menus $menuID }}
<nav>
<ul>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
</nav>
{{- end }}
{{- define "partials/inline/menu/walk.html" }}
{{- $page := .page }}
{{- range .menuEntries }}
{{- $attrs := dict "href" .URL }}
{{- if $page.IsMenuCurrent .Menu . }}
{{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
{{- else if $page.HasMenuCurrent .Menu .}}
{{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
{{- end }}
<li>
<a
{{- range $k, $v := $attrs }}
{{- with $v }}
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
{{- end }}
{{- end -}}
>{{ or (T .Identifier) .Name | safeHTML }}</a>
{{- with .Children }}
<ul>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
{{- end }}
</li>
{{- end }}
{{- end }}
|
调用上面的局部,传递一个菜单ID和当前页面的上下文。
layouts/_default/single.html
1
2
| {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
{{ partial "menu.html" (dict "menuID" "footer" "page" .) }}
|
页面引用
无论您如何定义菜单条目,与页面相关联的条目都可以访问页面变量和方法。
这个简单的示例在每个条目的name
旁边渲染一个名为version
的页面参数。使用with
或if
来处理(a) 指向外部资源的条目,或者(b) version
参数未定义的条目。
layouts/_default/single.html
1
2
3
4
5
6
7
8
9
10
| {{- range site.Menus.main }}
<a href="{{ .URL }}">
{{ .Name }}
{{- with .Page }}
{{- with .Params.version -}}
({{ . }})
{{- end }}
{{- end }}
</a>
{{- end }}
|
菜单条目参数
当您在站点配置或前置元数据中定义菜单条目时,可以包括params键,如以下示例所示:
当您在站点配置中定义菜单条目或在前置元数据中定义菜单条目时,您可以像这些示例中那样包含一个params
键:
这个简单的示例为每个锚点元素呈现一个class
属性。使用with
或if
来处理params.class
未定义的条目。
layouts/partials/menu.html
1
2
3
4
5
| {{- range site.Menus.main }}
<a {{ with .Params.class -}} class="{{ . }}" {{ end -}} href="{{ .URL }}">
{{ .Name }}
</a>
{{- end }}
|
本地化
Hugo提供了两种本地化菜单条目的方法。详见多语言。
另请参阅
最后修改 May 22, 2023:
第一次提交 (9f24e27)