Day9：Hugo + Blowfishテーマなサイトでメインメニューを設定する

本記事の概要

Hugo + Blowfishテーマなサイトで、メインメニューを設定する方法について説明する初心者向けTips的な記事です。

前提

Hugo+Blowfishテーマ適用済みの環境です。
なお、Windowsでの操作を想定しています。
(本記事が属するアドベントカレンダーについてもご確認ください)

どこに記載するか？

Hugo+Blowfishテーマにおいては、config/_default/menus.ja.tomlに記載する。
ちなみに、jaの部分がenであれば英語版の設定になる。
つまり、複数言語対応する場合は、menus.**.tomlが言語の数だけ存在することになる。

メインメニューを追加する

こういった感じにテンプレート的に書いておくと書きやすい。
追加したい場合はコピペして必用な部分を差し替えればよい。
この例の場合は、画面上部のメインメニューにまとめと表示される。

メインメニュー設定のテンプレート

# まとめ
[[main]]
  # 表示名
  name = "まとめ"

  # 親メニュー(サブメニューが属する親)
  # Parent = "" # 親メニューなので存在しない

  # ジャンプ先(左辺のパラメータは自サイト内であればpageRef/外部であればurl)
  # pageRef = ""  # 親メニューにするので設定しない(設定することも可能)

  # アイコン(必要であれば。使わななければコメントアウト。)
  # pre = "github"

  # 重み(この値が低い順に並べられる。同じ場合はアルファベット順)
  weight = 1 # 一番先頭にしたいので最小の1とする。

サブメニューの例

先の例のとほぼ同様になるが、Parentに対して「親」メニューの名前を追加することで、サブメニューになる。
コメントにも書いてあるが、自サイトであればpageRefを使用し、外部サイトに飛ばしたければpageRefではなくurlとすればよい。

サブメニューの例

# まとめ/SNSリンク一覧
[[main]]
  # 表示名
  name = "SNSリンク一覧"

  # 親メニュー(サブメニューが属する親)
  Parent = "まとめ" # 「まとめ」配下のサブメニュー

  # ジャンプ先(左辺のパラメータは自サイト内であればpageRef/外部であればurl)
  pageRef = "sns-links"

  # アイコン(必要であれば。使わななければコメントアウト。)
  pre = "link"

  # 重み(この値が低い順に並べられる。同じ場合はアルファベット順)
  weight = 1 # まとめ配下の先頭にしたいので

Tips:preについて

preに値を設定することで、Blowfishに組み込まれているアイコンをメニューに設定できる。
設定できる値とアイコンは下記の公式サイトを参照すると良い。

なお、自分でオリジナルのアイコンを追加したければ、assets/icons/ディレクトリに**.svgファイル**を置けば良い。

上記ディレクトリにxyz.svgを置いた場合、pre = "xyz"と指定すれば、そのアイコンを表示できるようになる。

注意点：重み(weight)について

メニューの並び順はweightの値を用いて調整する。
weightは1以上の値となる。

なお、weightを省略するとアルファベット順で勝手にソートされる。
日本語環境では並び順が想像しにくいので、
基本的にはweightの値を明示的に書き、並び順が分かるようにした方が良い。