メニューしたい([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
名を設定します。
複数のメニューを設定したい
1menu = ["main", "footer", "docs"]
2title = "問い合わせ"
用途別に複数のメニュー変数を作成できます。 そして、どのメニュー用に表示するか、ページごとの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
要素を使います。