Hugoサイトにタグページを追加した方法

最近、自分のHugo製ブログに専用のタグページを追加することにした。ここでは、その手順をまとめている。

1. layouts/taxonomyにterms.htmlを作成

最初に、全タグとそのカウントを一覧表示するテンプレートが必要だったため、

layouts/taxonomy/terms.html

というファイルを作成し、以下のコードを記述した。

{{ define "main" }}
<main>
  <ul>
    {{ range .Data.Terms }}
      <li>
          {{ $key := .Page.Title | replaceRE "[- ]" "_" }}
          <a href="{{ .Page.Permalink }}">{{ i18n $key | default .Page.Title }}</a> ({{ .Count }})
      </li>
    {{ end }}
  </ul>
</main>
{{ end }}

このテンプレートはHugoのテンプレート言語を用いて、すべてのタグ名・パーマリンク・カウントを表示する。

Tip： baseof.html が用意されていれば、この”main”ブロックがあなたのサイト構造に正しく挿入される。

2. メニューへタグページを追加（hugo.toml）

タグページをナビゲーションで見つけやすくするため、サイトの設定ファイル hugo.toml に以下を追加した。

[[menu.main]]
name = "Tags"
url = "/tags/"
weight = 8

weight の値を調整することでメニュー内の表示順が変わる。

3. tagsがタクソノミーとして定義されているか確認

タグページが正常に生成されるように、 hugo.toml でタクソノミー（分類）が正しく定義されているか確認しよう。

[taxonomies]
  tag = "tags"
  category = "categories"

デフォルト設定を使っていれば既に定義されているが、カスタマイズしている場合は特に確認するように。

4. 各記事のFront Matterにタグを指定

各記事のFront Matterに tags を含めているか再度確認すること。

TOML形式の例：

tags = ["Hugo", "Static Site", "Tutorial"]

これがないとHugoがタグ一覧を生成しない。

5. （オプション）タグ個別ページのカスタマイズ

各タグ（例: /tags/hugo/）のページに独自のデザインを適用したい場合は、

layouts/taxonomy/tag.htmlやlayouts/_default/terms.html

を編集・作成しよう。

必須ではないが、サイトのブランディングを強調できる。

6. （オプション）テストとビルド

設定後、hugo server を実行してローカルで確認しよう。 /tags/ ページに期待通りタグ一覧が表示され、メニューにも「Tags」が追加されているか確認すること。

以上で終了だ。この手順を踏めば、Hugoサイト上にタグページが表示され、訪問者が投稿をタグから簡単に発見できるようになる。もしタクソノミー定義や記事のタグ追加を忘れていると、タグページが表示されない・空になることがあるため、注意すること。