トップ > Hugo > Hugo - メニュー、各項目の表示

Hugo - メニュー、各項目の表示

Hugo サイトを作るまで

前回でロゴやファビコンの変更ができたので、次はメニューなどの表示面を整えていきます。

理想のブログの構成

ただ記事が探しやすく見られればよいので簡単な構成にしました。

TOP
　┗カテゴリー
　　┗記事
　┗タグ
　　┗記事

About（筆者紹介のページ）などヘッダーに表示されていたメニューも不要なので消します。
多言語対応もできないので日本語一択で表示させます。

Light/Darkモードの切り替えはおもしろそうなので残しておこうと思います。

その前に調べました

前回の教訓を受けてドキュメントは見よう！ということで、使用しているテーマ「Clarity」のGitHubを見ました。 ごりごり翻訳ツールを使って解読しました。

設定ファイル、params.tomlの存在

ドキュメント（README.md）を読んで大まかに分かったことは、設定の変更はconfig.tomlファイルと、その中の [param] の部分で行うということでした。
ここでconfig.tomlファイルの [param] をいじっても反映されない問題に直面しました。
サイト名の変更をするときと同じです。

では別のファイルで設定されているのかと、params.tomlというファイルの存在を思い出しました。

あれこれ試してみましたが、同じ設定項目は、params.tomlの設定値が優先されるようです。
Hugoのドキュメントにありました。

Configure Hugo | Hugo

Configuration File
Hugo uses the config.toml, config.yaml, or config.json (if found in the site root) as the default site config file.

設定ファイル
Hugoは、config.toml、config.yaml、config.json（サイトのルートにある場合）をデフォルトのサイト設定ファイルとして使用します。

config.tomlはルートに置いているのでデフォルトの設定ファイルだそうです。

Configuration Directory
In addition to using a single site config file, one can use the configDir directory (default to config/) to maintain easier organization and environment specific settings.

  • Each file represents a configuration root object, such as params.toml for [Params], menu(s).toml for [Menu], languages.toml for [Languages] etc…
  • Each file’s content must be top-level.

設定ディレクトリ
サイトの設定ファイルだけでなく、configDirディレクトリ(デフォルトはconfig/)を使用して、組織や環境に応じた設定を簡単に行うことができます。

  • 各ファイルは、[Params]にはparams.toml、[Menu]にはmenu(s).toml、[Languages]にはlanguages.tomlというように、設定のルートオブジェクトを表します。
  • 各ファイルの内容はトップレベルでなければなりません。

「ルートオブジェクト」というのは、最上位の設定ファイル、ということでしょうか。
「トップレベル」というのは設定項目と値が入れ子になっていない、ということかなと思いました。

config.tomlファイルでは、

# [languages]
# config/_default/languages.toml

# [menus]
# config/_default/menus/menu.xx.toml

とコメントアウトになっており（ちなみに [params] の部分には同じような # config/_default/params.toml といった記述がない）、# を取って有効にすると、画面が表示されなくなりました。
（コマンドラインで「bare keys cannot contain '/'」というエラーが出ました）

これは、どうやら「[languages] は config/_default/languages.toml」で設定しています」というコメント のようです。
とんだ勘違いでした。

エラー内容の確認、大事ですね！

config.tomlファイルでは [params] のように [languages] を設定できました。
[languages] の下の [markup] を見ながら書いてみるとうまくいきました。

[languages]
# config/_default/languages.toml
  [languages.ja]
    title = "サイト名"

ただlanguages.tomlファイルが優先されるので、languages.tomlファイルで設定がある限りは、config.tomlの設定値は反映されません。

少し分かった...！

これで諸々の設定もスムーズにいく、ようになるかもしれません。

複数のサイトをHugoで作るとなった場合、configディレクトリ内に環境（あるいはサイト？）ごとにディレクトリ・設定ファイルを置いて管理することができる、というところまでは分かりました（Hugoのドキュメントより）。

その先が謎なのですが、複数サイトを作らないので、今回も謎なままで themes/hugo-clarity にあるexampleSiteについてはスルーしようと思います。

テンプレートについて

そしてHugoのテンプレート機能について調べました。

静的サイトジェネレータ「Hugo」と技術文書公開向けテーマ「Docsy」でOSSサイトを作る | さくらのナレッジ

Go言語では、text/templateやhtml/templateというテンプレート機構が標準で用意されている。Hugoではこのテンプレート機構をそのままレンダリングに使用している。

Go言語のテンプレート機構について、今度はGo言語のドキュメントを見ました。

template package - text/template - pkg.go.dev

template package - html/template - pkg.go.dev

Hugoを使うにあたり、Go言語自体の学習は不要であるという記事も見かけました。
それでもテンプレート機構の書式は理解してないとカスタマイズは難しいと感じました。

「{{」および「}}」で囲まれた部分はテンプレートエンジンによって記述された処理結果に置き換えられる。

などなど。

↑引用元の「さくらのナレッジ」に文法が載っていました。
引き続き調べながらカスタマイズしていきます。

こちらもテンプレートの構成について詳しく載っています。

Hugo をしばらく触ってなかったので、わかりやすくまとめ直した - ばうあーろぐ

メニューの修正

ようやく英語やHugoに馴染んできたところで、ヘッダーのメニューを変えていきます。

ClarityのGitHubより該当箇所を見つけました。

Main Menu To add, remove, or reorganize top menu items, edit the files here. Specifically look for items with main.

If you prefer the more traditional approach, delete content\config folder and enter a main menu entry inside the config.toml file

メインメニュー トップメニューの項目を追加、削除、再編成するには、ここでファイルを編集します。特に、mainが付いている項目を探してください。

より伝統的な方法をお望みの場合は、content\configフォルダを削除し、config.tomlファイル内にメインメニューの項目を入力してください。

[[main]] があるところは言語ファイルの config/_default/menus/menu.xx.toml でした。

メニューの設定が色々できそうですが、そもそもメニューが要らない。
どうしたものかと思いましたが、テンプレート側からごっそり外してしまいました。

すなわち layouts/partials/header.html です。

メニューの設定値を弄ったほうがいいのか迷いましたが、このときはconfig周りが謎だらけだったので、テンプレートをいじりました。

ここでまた1つ問題が。
スマホになるとメニュー部分が空になります。メニューボタンもなくなってしまいました。 スマホのメニュー部分にはタグやカテゴリーの一覧が表示されていてほしいです。

## スマホのハンバーガーメニューにカテゴリー・タグメニューを入れたい

メニューは要らないと言ったものの、スマホではカテゴリーやタグからすぐリンクできるようにしたいので、ハンバーガーメニューにカテゴリー・タグ一覧を入れることにしました。

新しく入れるメニュー

これはPC表示だと右カラムに出てくる部分、すなわちsidebar.htmlのタグ・カテゴリー部分をコピーして入れました。

ここで少し問題が。ハンバーガーメニュー内はスクロールしない仕様のようです。

メニューだけならそんなに高さは取らないからですね。
こちらは後で直そうと思います。

既存のメニュー

当初はテンプレートからまるまる削除していましたが後々メニューを出したくなるかもしれないので、なるべくコードを消さない方向でやってみました。

1つ目は日本語用に作ったmenu.ja.tomlの [[main]] をコメントアウトすることです。

こんな感じです。

# [[main]]
  # name = "Archives"
  # url = "post/rich-content/"
  # weight = -109

「Home」は一応残しておくことにしました。

「データがない」という状態にしておかないと、テンプレート側でdiv要素が作られたりします。

同様に、「多言語対応」の扱いを受けてしまっていたようで空のdiv要素が書き出されていました。
これはmenu.ja.tomlファイルの他に残しておいたmenu.en.toml、menu.pt.tomlファイルを削除することで解決しました。

ファイルごと削除は当初抵抗があったので、全てコメントアウトで解決しないか試してみたところ、ダメでした。

このあたりのテンプレートの条件分岐のコードが読めればいいのですが、よくわからないので探り探りです。

次回へつづく

これでようやく表示したい内容が揃いました（多分）！

全体の色やハンバーガーメニューの調整をして、一覧の記事、詳細の記事の部分を触っていきます。

Sassはsassファイル、SASS記法で書かれています。
慣れないですが良い機会です。

ひとまずおしまい。