Hugoのメニュー機能を解説

こんにちはnasustです。 Hugoにはメニューを構築する機能があります。これを上手く活用する事で、内部のナビゲーションを工夫する事ができます。この記事の左側のツリー状のメニューは、このHugoのMenusという機能を使用して出来ています。

メニューの設定の仕方は2通りあります。

  • Markdownのフロントマターで設定する
  • config.tomlで設定する

Markdownのフロントマターで設定する

---
menu: "blog"
---
yaml

上記の様に設定します。このMarkdownファイルはblogメニューに属していると設定しています。

テンプレートでは、.Site.Menus.blogでアクセス出来ます。blogメニューに属する各リンクは、コレクションなのでrangeでアクセス出来ます。

{{ range .Site.Menus.blog.ByWeight }}
    <a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
html

階層構造

階層構造で指定することも出来ます。この記事のフロントマターを例として挙げます。

---
title: "HugoのMenusを解説"
date: 2019-07-05T00:00:00+09:00
draft: false
menu:
    hugo:
        parent: "tips"
        weight: 60
---
yaml

hugoメニューの親がtipsであると設定しています。weightは項目の順番を指定しています。.ByWeightでメニューの項目はweightの昇順でソートされます。

{{ range .Site.Menus.blog.ByWeight }}
    <a href="{{ .URL }}">{{ .Name }}</a>
    {{ if .HasChildren }}
        {{ range .Children }}
            <a class="child" href="{{ .URL }}">{{ .Name }}</a>
        {{ end }}
    {{ end }}
{{ end }}
html

メニューの項目で子の項目がある場合は、.HasChildrenで確認出来ます。range .Childrenで子の項目にアクセス出来ます。

config.tomlで設定する

メニューはconfig.tomlで設定出来ます。グローバルヘッダーメニューなど、Markdownのフロントマターでは出来ない設定が出来ます。

nasust dev blogのグローバルヘッダーメニューを例を挙げます。

[menu]
    [[menu.main]]
        identifier = ""
        name = "Home"
        url = "/"
        weight = 1
    [[menu.main]]
        identifier = "blog"
        name = "Blog"
        url = "/blog"
        weight = 2
    [[menu.main]]
        identifier = "flutter"
        name = "Flutter"
        url = "/flutter/start/about/"
        weight = 3
toml

identifierはセクション名を指定するとHugoのドキュメントに書いてありますが、ユニークであれば大丈夫です。nameは、項目の名前です。urlは相対パスを設定します。weightは順番です。テンプレートでは.Site.Menus.mainでアクセス出来ます。

{{ range .Site.Menus.main.ByWeight }}
    <a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
html
prevnext