メニュー設定したい([menu])
1[menu]
2[[menu.main]]
3name = "Home"
4pageRef = "/"
5weight = 10
6
7[[menu.main]]
8name = "About"
9pageRef = "/about"
10weight = 20
11
12[[menu.main]]
13name = "Related Page"
14url = "外部ページ"
15weight = 90
[menu]セクションで、サイトのメニューやナビゲーションを作成できます。
内部ページはpageRefプロパティ、外部ページはurlプロパティを使います。
identifierとparentプロパティを使って、メニューを階層化できます。
設定の概要はMenusのドキュメント、設定可能な項目はMenusメソッドを参照してください。
メニューを入れ子にしたい
1[menu]
2[[menu.main]]
3identifier = "parent"
4name = "親ページ"
5pageRef = "/parent"
6
7[[menu.main]]
8parent = "parent"
9name = "子ページ1"
10pageRef = "/parent/child1"
11
12[[menu.main]]
13parent = "parent"
14name = "子ページ2"
15pageRef = "/parent/child2"
identifierとparentプロパティを使って、メニューを階層化できます。
まず、親ページのidentifierプロパティを設定します。
そして、子ページにparentプロパティを追加し、親ページのidentifier名を設定します。
注意
同じメニュー名(main)に複数のエントリーを追加する場合は、
[menu.main]ではなく[[menu.main]](配列テーブル)を使います。
[menu.main]を繰り返すとTOMLの構文エラー(table main already exists)になります。
複数のメニューを設定したい
1# frontmatter
2menu = ["main", "footer", "docs"]
3title = "問い合わせ"
用途別に複数のメニュー変数を作成できます。 そして、どのメニュー用に表示するか、ページごとのfrontmatterで選択できます。
上記サンプルでは「問い合わせ」ページをメイン用(site.Menus.main)、フッター用(site.Menus.footer)、ドキュメント用(site.Menus.docs)の3種類に設定しています。
メニューのアイコンをつけたい
1[menu]
2[[menu.main]]
3identifier = "about"
4name = "about"
5url = "/about/"
6pre = '<i class="fas fa-info-circle"></i>'
pre変数を、メニュー名の先頭にアイコンを追加できます。
アイコンはFontAwesomeなどのウェブフォントを利用するのがよいです。
メニュー名の末尾に追加する場合はpost要素を使います。
言語ごとにメニューしたい(menus.ja.toml / menus.en.toml)
1# /config/_default/menus.ja.toml
2[[main]]
3name = "ホーム"
4pageRef = "/"
5weight = 10
6
7[[main]]
8name = "概要"
9pageRef = "/about"
10weight = 20
1# /config/_default/menus.en.toml
2[[main]]
3name = "Home"
4pageRef = "/"
5weight = 10
6
7[[main]]
8name = "About"
9pageRef = "/about"
10weight = 20
多言語サイトの場合、/config/_default/にmenus.{言語コード}.tomlを配置すると、言語ごとに別のメニュー内容を設定できます。
hugo.toml側の[menu]セクションとは違い、ファイル名の時点で対象言語が決まるため、
ファイルの中身では[menu.main]ではなく[[main]]のようにmenu.を省略して書きます。
同じidentifierのページでもメニュー名を言語ごとに変えたい場合や、
言語によってメニュー項目自体を増減させたい場合に使います。