HUGOでカテゴリ一覧を階層化する方法

本記事のゴールとHUGO記事管理の基本

まずはじめに、本記事でのゴールと記事管理の基本を共有します。

めんどくせーから、さっさと手順を教えろという場合は、ここまで 移動して読むのがオススメです。

本記事のゴール

ゴールはカテゴリ一覧の表示が階層化されることです。

• ブログ
• WordPress
• HUGO

上みたいに並行じゃなくて、下みたいに階層化するのがゴールです。

• ブログ
  • WordPress
  • HUGO

HUGOの記事管理のスタイル

HUGOで記事を管理する方法は、2パターンあります。

それぞれの機能による管理方式の違いはこれから説明します。

スゴショウ

自分はSection機能での管理にしました。

TaxonomyとSectionを使った管理の違い

Taxonomyで管理する場合は、カテゴリーを複数セットして、カテゴリーの記述順通りに入れ子になるようにカテゴリ一覧のテンプレートを作る。

この場合、格納フォルダは自由だけど、記述のブレがあるとそのまま採用されるのが欠点。
あと都度、カテゴリの入力が必要です。

Sectionで管理する場合は、フォルダのある場所がそのままセクションになります。
フォルダの構造を変えたらURLが変わるけど、記事やセクションページごとにパーマリンクを指定しておけば問題ありません。
カテゴリの設定も不要です。

どちらの機能を使っても、階層構造のツリーを使って記事管理はできるけど、Section機能で管理する方が管理しやすいのでSection機能を採用しました。

スゴショウ

あと、カテゴリを書かなくても良いのも楽です！

HUGOのカテゴリ一覧を階層化する手順

ここでのアクションは大きくわけて3つです。

• セクション自体を階層化する
• フロントマター表記の最適化
• テンプレート等の修正

この順番にやっていけば大丈夫です。

階層化するカテゴリフォルダーを作成する

HUGOでは必要なだけ階層を作れるので、まず先に必要な階層をcontentフォルダー下に作りましょう。

今回は、ブログに関する記事をWordPressとHUGOに分けたいので、以下のような構造にしました。

• content
  • blog
    • wordpress
    • hugo

Section機能を使って記事を管理する場合、contentフォルダ直下にカテゴリ別のフォルダを置くのがオススメです。

最初はblogフォルダの親にpostフォルダを作っていたけど、サイドバーのセクション一覧表示からpostフォルダを消す方法がわからずに諦めました。

パーマリンクの最適化

フォルダの階層化がおわったら、パーマリンクの最適化をしましょう。

• フォルダのパーマリンク最適化
• 記事のパーマリンク最適化

の順番に進めます。

フォルダのパーマリンク最適化

contentフォルダ内の各フォルダに _index.mdファイルを置きましょう。

フロントマタ―を記述します。
私のブログならこんな感じです。

---
title: "ブログ"
url: "blog/"
---

カテゴリ名に日本語を入れる場合は、titleを日本語で書きurlでパーマリンクを指定すると日本語URLにならず、任意のURLを指定できます。

dateは入れなくてもいいですが、カテゴリの表示順を指定したい場合は入れましょう。
新しい日付にしたカテゴリが上に表示されます。

記事のパーマリンク最適化

記事のパーマリンクを指定しないと、冗長な記事urlになります。
中の階層が変わったときに、URLが変わるのもまずいので、フロントマタ―でURLを指定しましょう。

---
title: "個別記事"
url: "/末端カテゴリ/個別記事"
---

セクションの入れ子構造を途中で変えることがありそうなので、パーマリンクは 末端カテゴリ/個別記事 の形で落ち着きました。

ルート直下にもできますし、フォルダ構造通りの表記も可能です。

スゴショウ

SEO的にもこの表記がいいでしょう。

テンプレート等の修正

最後にテンプレートの修正です。
セクションページとサイドバーのカテゴリ一覧のテンプレートを修正します。

細かい内容の好みはあると思うので、最低限必要なコードのみ共有します。

セクションページのテンプレート

個別セクション内に含まれる記事を表示させます。

<ul>
{{ range .Data.Pages }}
<li>
  <a href="{{ .Permalink }}">{{ .Title }}</a>
</li>
{{ end }}
</ul>

これでセクション内の記事一覧が表示されます。

日付を入れる場合は、aタグ内に {{ .Date.Format “2006-01-02” }} のタグをいれれば挿入できます。

カテゴリ一覧のテンプレート

contentフォルダ内に含まれるセクションを表示させます。

  {{ define "categories-list" }}
  <ul>
    {{ range .Sections }}
    <li>
      <a href="{{.Permalink}}">{{ .Title }}</a>
    
    {{ if (len .Sections) }}
    {{ template "categories-list" . }}
    {{ end }}
    {{ end }}
    </li>
  </ul>
  {{ end }}
  {{ template "categories-list" .Site }}

これでカテゴリ一覧が表示されます。
投稿数を入れる場合は、aタグ内 {{ .Title }} 直後に ({{ len .RegularPagesRecursive }}) を入れると投稿数が表示されます。

まとめ：HUGOのカテゴリ階層化はSectionとパーマリンクかカギ

カテゴリー管理をSection機能でやるのがポイントですね。
この方式だとURLと表示名の分離もしやすいし、プロジェクト内で階層が変わってもURLが変わらないのでオススメです。

スゴショウ

まずはフォルダ分けをするところからはじめましょう。