【Hugo】カテゴリ一覧、タグ一覧のページを作成する


Hugo で作ったブログに、カテゴリ一覧 と タグ一覧 のページを作ったので、その方法についてです。
ついでにヘッダーメニューにも各一覧ページへのリンクを設置します。

やること

  1. config.toml に追記
  2. terms.html を作成
  3. ヘッダーにカテゴリ一覧・タグ一覧へのリンクを追加

1. config.toml に追記

カテゴリ一覧、タグ一覧を生成するためには config.toml に次の設定を追記します。

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

2. terms.html を作成

使用しているテーマのディレクトリ内にある layouts/_defaultterms.html というファイルを作成します。
今回は Indigo を使用しているので themes/indigo/layouts/_default 内に次のような内容の terms.html を作成します。

{{ partial "header.html" . }}
<h2>{{ .Title }}</h2>
{{ if eq .Title "Tags"}}
    {{ if lt 0 (len .Site.Taxonomies.tags) }}
    <ul>
        {{ range .Site.Taxonomies.tags.ByCount }}
        <li><a href="{{ $.Site.BaseURL | relURL }}tags/{{ .Name | urlize }}">{{ .Name }}<span>({{ .Count }})</span></a></li>
        {{ end }}
    </ul>
    {{ end }}
{{ else if eq .Title "Categories"}}
    {{ if lt 0 (len .Site.Taxonomies.categories) }}
    <ul>
        {{ range .Site.Taxonomies.categories.ByCount }}
        <li><a href="{{ $.Site.BaseURL | relURL }}categories/{{ .Name | urlize }}">{{ .Name }}<span>({{ .Count }})</span></a></li>
        {{ end }}
    </ul>
    {{ end }}
{{ end }}
{{ partial "footer.html" . }}

このレイアウトは /categories/ または /tags/ にアクセスした際に使用されます。
Title の値でカテゴリかタグかを判定してるのが変な感じですが、とりあえずコレで両方を出し分けられます。

3. ヘッダーにカテゴリ一覧・タグ一覧へのリンクを追加

ヘッダーにカテゴリ・タグそれぞれの一覧ページへのリンクを追加します。

Indigo の場合、テーマディレクトリ内のlayouts/partials/pagenav.html を次のように編集します。

 <nav>
     {{ $currentPage := . }}
     <div id="page-nav">
         <div class="page-nav-item">
             <a href="{{ .Site.BaseURL }}">Home</a>
         </div>
         {{ range .Site.Menus.main }}
             <div class="page-nav-item">
                 <a href="{{ .URL }}">
                     {{ .Pre }}
                     <span>{{ .Name }}</span>
                 </a>
             </div>
         {{ end }}
+        <div class="page-nav-item">
+            <a href="/categories/">Categories</a>
+        </div>
+        <div class="page-nav-item">
+            <a href="/tags/">Tags</a>
+        </div>
     </div>
 </nav>


以上で、カテゴリ・タグの一覧ページが作成できました。
手順は非常に簡単ですが、各カテゴリ・タグに該当する記事数の表示までしてくれるのは良いですね。


comments powered by Disqus