模板

菜单模板

概览

在定义菜单项之后，使用菜单变量和方法来渲染菜单。

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

  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" .) }}

页面引用

不论如何定义菜单项，与页面关联的菜单项都可以访问页面的变量和方法。

这个简单的示例在每个项的“名称”旁边渲染一个名为 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 提供了两种方法来本地化您的菜单项。参见多语言。

See also

Last updated: November 23, 2023: first release (332dc4cd7)
Improve this page