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 提供兩種方法來本地化您的菜單條目。請參閱 多語言。