Skip to main content
View on GitHub

メニューテンプレート

メニューをレンダリングするには、テンプレートでメニュー変数とメソッドを使用します。

概要

メニュー エントリの定義 の後、メニュー変数とメソッド を使用してメニューをレンダリングします。

メニューのレンダリング方法を決定する 3 つの要素は、以下です。

  1. メニューエントリの定義に使用される方法: 自動 、フロントマター内 、または サイト設定内
  2. メニュー構造: フラットまたはネスト
  3. メニュー エントリのローカライズ に使用される方法: サイト構成または翻訳テーブル

以下の例では、あらゆる組み合わせを処理します。

例

この部分テンプレート (パーシャル) はメニュー構造を再帰的に「ウォーク」し、ローカライズされたアクセス可能なネストされたリストをレンダリングする。

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

Call the partial above, passing a menu ID and the current page in context.

layouts/_default/single.html
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
{{ partial "menu.html" (dict "menuID" "footer" "page" .) }}

ページ参照

メニュー エントリを定義する 方法に関係なく、ページに関連付けられたエントリはページ変数とメソッドにアクセスできます。

この単純な例では、各エントリの name の隣に version という名前のページ パラメータが表示されます。 (a) エントリが外部リソースを指している場合、または (b) version パラメータが定義されていない場合、with または if を使用して防御的にエントリを処理するコードを作成します。

layouts/_default/single.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 は、メニュー項目をローカライズするために2つの方法を提供します。 多国語化 を参照してください。