[Hugo] カテゴリ一覧、タグ一覧のページを作成する
2018-10-25Hugo で作ったブログに、カテゴリ一覧 と タグ一覧 のページを作ったので、その方法についてです。
ついでにヘッダーメニューにも各一覧ページへのリンクを設置します。
やること
- config.toml に追記
- terms.html を作成
- ヘッダーにカテゴリ一覧・タグ一覧へのリンクを追加
1. config.toml に追記
カテゴリ一覧、タグ一覧を生成するためには config.toml に次の設定を追記します。
[taxonomies]
tag = "tags"
category = "categories"
2. terms.html を作成
使用しているテーマのディレクトリ内にある layouts/_default に terms.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