hugo
Pocket

Hugoのテーマショーケースに掲載されているテーマのアプデをした時に得た知見。今回は子階層も指定できるメニューのコードです。

https://themes.gohugo.io/hugo_theme_pickles/

GitHubはこちら。

https://github.com/mismith0227/hugo_theme_pickles

メニューのコード

早速ですが、メニューのコードです。

{{ if .Site.Menus.main }}
<nav>
  <ul>
    {{ range .Site.Menus.main.ByWeight }}
    {{ if .HasChildren }}
      <li>
        <span>{{ .Name }}</span>
        <ul>
          {{ range .Children }}
            <li><a href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
          {{ end }}
        </ul>
      </li>
    {{ else }}
    <li>
      <a href="{{ .URL }}">
        {{- .Name -}}
      </a>
    </li>
    {{ end }}
    {{ end }}
  </ul>
</nav>
{{ end }}

ざっくりと説明すると、メニューが指定されていた場合、ウェイトの数値の順番でメニューを表示。さらに親にぶら下がる形で子階層のメニューが指定されていればそれも表示します。

メニューを表示する方法

メニューを表示する方法は2パターンあります。

Front Matterで指定

個別記事のFront Matterで指定ができます。

++++
  title = "About Hugo"
  date = "2014-04-09"
  menu = "main"
++++

子階層の場合はこんな感じ

++++
  title = "About Hugo"
  date = "2014-04-09"
  menu:
    main:
      parent: tutorials
++++

この方法でもいいんですが、個別にマークダウンファイルに書くのでメンテ性が悪いと思います。変更したい場合に、マークダウンファイルを探して、一つ一つ直さないといけないです。

config.tomlで指定

以前は上記の方法でやってましたが、他のテーマを見ていて知った方法です。config.tomlに以下のように指定します。

[[menu.main]]
    name = "Blog"
    url = "/"
    weight = 1

[[menu.main]]
    name = "About"
    url = "/about"
    weight = 2

[[menu.main]]
    identifier = "theme"
    name = "theme"
    weight = 3

[[menu.main]]
    parent = "theme"
    name = "creating-a-new-theme"
    url = "/posts/creating-a-new-theme"
    weight = 1

[[menu.main]]
    parent = "theme"
    name = "migrate-from-jekyll"
    url = "/posts/migrate-from-jekyll"
    weight = 2

[[menu.main]]
    name = "Tags"
    url = "tags"
    weight = 4

見ればだいたいわかると思います。nameが表示されるメニュー名、urlはリンク先のパス、weightは表示順番。また、identifierを指定して、parentにその値を指定すると親子のリストになります。

こっちの方がconfig.tomlで管理できますし、メニューの順番や階層も見やすいですね。

最後に

今回はメニューの指定の紹介でした。

https://themes.gohugo.io/hugo_theme_pickles/

GitHubはこちら。

https://github.com/mismith0227/hugo_theme_pickles

Pocket

カテゴリー: タグ: