Menus

January 1, 1

概述

在定義選單項目後，使用選單方法來渲染選單。

有三個因素決定如何渲染選單：

用來定義選單項目的方法：自動定義、在 Front Matter 中定義或在站點配置中定義
選單結構：平面或嵌套
用來本地化選單項目的方法：站點配置或翻譯表

下面的範例處理了每種組合情況。

範例

這個部分模板遞歸地“走訪”選單結構，渲染本地化、可訪問的嵌套列表。

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/_default/single.html

{{ 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

{{- range site.Menus.main }}
  <a href="{{ .URL }}">
    {{ .Name }}
    {{- with .Page }}
      {{- with .Params.version -}}
        ({{ . }})
      {{- end }}
    {{- end }}
  </a>
{{- end }}

選單項目參數

當你在[站點配置]或[Front Matter]中定義選單項目時，可以包含 params 鍵，如這些範例所示：

這個簡單的範例為每個錨點元素渲染 class 屬性。使用 with 或 if 來防範處理那些未定義 params.class 的項目。

本地化

Hugo 提供了兩種方法來本地化你的選單項目。請參見多語言設置。