在 Hugo 中订购菜单项

Question

我正在尝试在我的 Hugo 主题中订购菜单项。它总是按字母顺序排列。但我想根据我添加的顺序进行更改。但我不知道该怎么做。这是我的 menu.html

<nav class="menu">
  <ul class="menu__inner menu__inner--desktop">
    {{ if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) }}
      {{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
        {{ if not .HasChildren }}
          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
        {{ end }}
      {{ end }}
      {{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
        <ul class="menu__sub-inner">
          <li class="menu__sub-inner-more-trigger">{{ $.Site.Params.MenuMore }} ▾</li>

          <ul class="menu__sub-inner-more hidden">
            {{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}
              {{ if not .HasChildren }}
                <li><a href="{{ .URL }}">{{ .Name }}</a></li>
              {{ end }}
            {{ end }}
          </ul>
        </ul>
      {{ end }}
    {{ else }}
      {{ range $.Site.Menus.main }}
        {{ if not .HasChildren }}
          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
        {{ end }}
      {{ end }}
    {{ end }}

    {{ if $.Site.Params.showLanguageSelector }}
    <div class="spacer"></div>
    <ul class="language-selector">
      <ul class="language-selector-current">
          <li>{{ .Language.LanguageName }} ▾</li>
      </ul>
      <ul class="language-selector__more hidden">
        {{ range $.Site.Home.AllTranslations }}
        <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
        {{ end }}
      </ul>
    </ul>
    {{ end }}
  </ul>

  <ul class="menu__inner menu__inner--mobile">
    {{ range $.Site.Menus.main }}
      {{ if not .HasChildren }}
        <li><a href="{{ .URL }}">{{ .Name }}</a></li>
      {{ end }}
    {{ end }}
    {{ if $.Site.Params.showLanguageSelector }}
    <hr />
        {{ range $.Site.Home.AllTranslations }}
          <li>
            <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
          </li>
        {{ end }}
    {{ end }}
  </ul>
</nav>

这里是 config.toml

中的菜单部分

  [languages.en.menu]
      [[languages.en.menu.main]]
        identifier = "about"
        name = "About"
        url = "/about"
      # [[languages.en.menu.main]]
      #   identifier = "education"
      #   name = "Education"
      #   url = "/education"
      [[languages.en.menu.main]]
        identifier = "projects"
        name = "Projects"
        url = "/projects"
      [[languages.en.menu.main]]
        identifier = "skills"
        name = "Skills"
        url = "/skills"
      [[languages.en.menu.main]]
        identifier = "interest"
        name = "Interest"
        url = "/interest"
      [[languages.en.menu.main]]
        identifier = "blog"
        name = "Blog"
        url = "/blog"

任何有关如何解决此问题的帮助都将不胜感激。我是 Hugo 的新手，不知道如何解决这些问题

Answer 1

菜单项有 .Weight 属性。如果你需要一些自定义属性，你也可以使用 .Pre 和 .Post.

Hugo menu properties

在 Hugo 中订购菜单项

Ordering Menu items in Hugo

menu

hugo