在配置文件中定义的 Hugo 菜单中突出显示 CurrentMenuItem

Question

只要我一直在使用它（至少两年），我就无法在 Hugo 中突出显示“当前菜单项”。

如果我在我的内容文件中使用 frontmatter 来定义菜单（即将每个内容单独添加到菜单中），这似乎是可能的。但是，我不想用这些信息在我的内容文件的前面乱扔垃圾，尤其是看到如何使用主配置文件定义菜单。

这是我在配置文件中声明菜单的方式（我更喜欢使用 JSON 而不是 YAML）：

"menu": {
  "main": [
    {
      "name": "Home",
      "weight": 1,
      "url": "/"
    },
    {
      "name": "About",
      "weight": 2,
      "url": "/about"
    },
    {
      "name": "Blog",
      "weight": 3,
      "url": "/blog"
    },
    {
      "name": "Contact",
      "weight": 4,
      "url": "/contact"
    }
  ]
},

这是我的菜单模板

<ul class="nav">
  {{ $currentPage := . }}
  {{ range .Site.Menus.main }}
    {{ if .HasChildren }}
      <li class="nav-item nav-item--has-submenu{{ if $currentPage.HasMenuCurrent "main" . }} nav-item--active{{ end }}">
        <a class="nav-link" href="javascript:;" title="{{ .Name }}">
          {{ .Pre }}
          <span>{{ .Name }}</span>
        </a>
        <ul class="nav-submenu">
          {{ range .Children }}
            <li class="nav-item{{ if $currentPage.IsMenuCurrent "main" . }} nav-item--active{{ end }}">
              <a class="nav-link" href="{{ .URL }}" title="{{ .Name }}">
                <span>{{ .Name }}</span>
              </a>
            </li>
          {{ end }}
        </ul>
      </li>
    {{else}}
      <li class="nav-item">
        <a class="nav-link" href="{{ .URL }}" title="{{ .Name }}">
          {{ .Pre }}
          <span>{{ .Name }}</span>
        </a>
      </li>
    {{end}}
  {{end}}
</ul>

我知道上面的标记专门检查每条内容的前端，我明白为什么它不起作用。我想知道的是为了突出显示当前菜单项，我必须进行哪些更改。

我认为通过配置文件定义菜单是为了向菜单添加非 Hugo 链接，因此无需突出显示这些项目。这是可能的，还是我将不得不接受我需要在我的内容中使用 frontmatter 来构建我的菜单？

谢谢

Answer 1

我看到两个问题，其中任何一个都可能导致问题。

第一个问题，也是我认为给您带来麻烦的问题，是您的 URL 没有以斜线结尾。Hugo 将所有 URL 规范化为以斜杠结尾，并将重定向到正确的 URL，但是当.IsMenuCurrent和.HasMenuCurrent比较 URL 以查看它们是否引用相同的资源时，他们没有考虑到这一点；他们只看到这一点，/blog并且/blog/有所不同。

尝试使用：

"menu": {
  "main": [
    {
      "name": "Home",
      "weight": 1,
      "url": "/"
    },
    {
      "name": "About",
      "weight": 2,
      "url": "/about/"
    },
    {
      "name": "Blog",
      "weight": 3,
      "url": "/blog/"
    },
    {
      "name": "Contact",
      "weight": 4,
      "url": "/contact/"
    }
  ]
},

第二个问题是.IsMenuCurrent和.HasMenuCurrent方法没有考虑到您可能正在运行一个多语言站点，在该站点中，/blog/您的菜单配置中的单个标准 URL可能会被重写/en/blog/或/es/blog/通过relLangURL，以便正确链接到相应的页面当前语言。因此，如果您试图保持菜单配置干燥，您可能会发现这两种方法仅适用于（最多）您的主要语言。

根据您提供的模板，这似乎不适用于您，但我会为发现此问题的其他人提供解决方案。

为了解决这个问题，您要么需要为每种语言维护单独的菜单，这很痛苦，要么使用您自己的逻辑来确定菜单条目是否指向当前页面。幸运的是，它非常简单：

{{ $currentPage := . }}
{{ range .Site.Menus.main }}

    {{ $menu_item_url := .URL | relLangURL }}
    {{ $page_url:= $currentPage.RelPermalink | relLangURL }}

    {{ if eq $menu_item_url $page_url }}
        {{/* the menu item links to the current page (with relLangURL) */}}
    {{ end }}

{{ end }}