模板

菜单

概述

在定义菜单条目后，使用菜单方法渲染菜单。

三个因素决定如何渲染菜单

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

菜单条目参数

当您在站点配置中或在前言中定义菜单条目时，您可以包含一个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 提供了两种方法来本地化您的菜单条目。请参阅多语言。

另请参阅

最后更新时间：2024 年 8 月 16 日：更新 menu.md (eb159fe62)
改进此页面