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

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

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

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

本記事のゴール

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

  • ブログ
  • WordPress
  • HUGO

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

  • ブログ
    • WordPress
    • HUGO

HUGOの記事管理のスタイル

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

HUGOの記事管理方法
  • Taxonomy
  • Section
Taxonomy機能がタグやカテゴリなどで管理する方式で、Section機能が階層構造ツリーを作って管理する方式の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ファイルを置きましょう。

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

_index.md
---
title: "ブログ"
url: "blog/"
---

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

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

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

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

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

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

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

”スゴショウ” スゴショウ

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

テンプレート等の修正

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

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

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

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

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

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

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

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

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

categories-list.html
  {{ 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とパーマリンクかカギ

記事の要約
  • 前提
    • ゴール
    • HUGOの記事管理のスタイル
    • TaxonomyとSectionを使った管理の違い
  • HUGOのカテゴリ一覧ページを階層化する手順
    • 階層化するカテゴリフォルダーを作成する
    • パーマリンクの最適化
    • テンプレート等の修正

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

”スゴショウ” スゴショウ

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

カテゴリー:HUGO