TEMPLATES

菜单

概述

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

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

  1. 定义菜单项的方法： 自动 、 在 front matter 中 或 在站点配置中
  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 }}

菜单项参数

当您 在站点配置中 或 在 front matter 中 定义菜单项时，您可以包含一个 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: January 10, 2025: 添加 gtm 谷歌代码管理 (6220bf5)
Improve this page