Hugo 菜单模板
创建模板来渲染一个或多个菜单。
概述
三个因素决定如何渲染菜单：
下面的示例处理每种组合。
示例
此 部分 模板递归地"遍历"菜单结构，渲染本地化的可访问嵌套列表。
layouts/_partials/menu.html
{{- $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 }}
{{- $name := .Name }}
{{- with .Identifier }}
{{- with T . }}
{{- $name = . }}
{{- end }}
{{- end }}
<li>
<a
{{- range $k, $v := $attrs }}
{{- with $v }}
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
{{- end }}
{{- end -}}
>{{ $name }}</a>
{{- with .Children }}
<ul>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
{{- end }}
</li>
{{- end }}
{{- end }}调用上面的部分，传递菜单 ID 和当前页面上下文。
layouts/page.html
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
{{ partial "menu.html" (dict "menuID" "footer" "page" .) }}页面引用
无论您如何 定义菜单条目，与页面关联的条目都可以访问页面上下文。
这个简单的示例在每个条目的 name 旁边渲染名为 version 的页面参数。使用 with 或 if 进行防御性编码，以处理 (a) 条目指向外部资源，或 (b) 未定义 version 参数的条目。
layouts/page.html
{{- range site.Menus.main }}
<a href="{{ .URL }}">
{{ .Name }}
{{- with .Page }}
{{- with .Params.version -}}
({{ . }})
{{- end }}
{{- end }}
</a>
{{- end }}菜单条目参数
当您在 [站点配置] 或 [前沿中] 定义菜单条目时，可以包含 params 键，如下面的示例所示：
这个简单的示例为每个锚元素渲染 class 属性。使用 with 或 if 进行防御性编码，以处理未定义 params.class 的条目。
layouts/_partials/menu.html
{{- range site.Menus.main }}
<a {{ with .Params.class -}} class="{{ . }}" {{ end -}} href="{{ .URL }}">
{{ .Name }}
</a>
{{- end }}本地化
Hugo 提供两种方法来本地化您的菜单条目。请参阅 多语言。