Hugo を使った個人サイトの作り方 9 記事ページの作成(2) Taxonomy

tech 1995字：読了まで約3分41秒

Hugo アイキャッチ画像

前回はBaseテンプレートを作り、記事表示用のSingleテンプレートで一部を上書きすることで、汎用ページ表示を行えるようにしました。今回は分類機能Taxonomyについて扱おうと思います。

Taxonomyとは

分類法のことで、具体的にはカテゴリ、タグ、シリーズ機能などを指します。Hugoではこの他にもユーザー独自の分類ラベルを設けることができ、公式ドキュメントTaxonomies | Hugoでは映画を例にして説明されています。

機能を利用するにはサイトの設定ファイルhugo.tomlに以下の記述を加えます。

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

単数形のkey = “複数形の値” という形で書かなければいけないようです。このサイトではカテゴリ、タグ、シリーズを利用します。まずはmarkdownファイルでの設定から見ていきましょう。オリジナル小説のFrontMatterでは次のように設定しています。

tags: ["オリジナル小説", "非エロ", "伝奇"]
categories: ["オリジナル小説"]
series : ["Monsiuer de Paris ne se perdre pas"]

FrontMatterをYAML形式にしているのでこんな感じですね。こちらは 複数形のkey：中身の配列 という表記になっているので気を付けます。どれもカンマで区切れば複数指定が可能になっています。「非エロ」がタグってどういうことだよ。

日本語に関しては日本語URLが吐かれます…。シリーズ機能もうまく動かなかったのでやむなく英数字で書いています。カテゴリも「・」とか入ると不具合あったりとか。今後の課題としたいです。

Hugoはこの設定をもとに、分類用ページをローカルで作っていきます。かなり多くのファイルが作成されてしまうので、必要ない場合は設定ファイルにdisableKinds = [ “taxonomy”,“term” ]と書いて外しましょう。

Singleテンプレート他での記述

さてこうして設定した分類ですが、記事表示に反映させたいと思います。

Tags

公式ドキュメントの例を参照します。この場合ページ変数でタグを参照できればそれをリスト表示しています。

1{{- if .Params.tags }}
2  <ul class="post-tags">
3   {{- range ($.GetTerms "tags") }}
4   <li><a href="{{ .Permalink }}"  class="tag-{{ .Name }}">{{ .LinkTitle }}</a></li>
5     {{- end }}
6  </ul>
7{{- end }}

あとは【WordPress】タグクラウドのCSSデザイン９選 | カゲサイあたりを見てよきように装飾します。当サイトではR18とBLのタグのみ、背景色を変えて目立たせています。

Categories

カテゴリーに関しては、一記事一分類にして色分けしています。

  1. Dataテンプレートにカテゴリと特定の値の対象表を用意
  2. ページ変数のカテゴリと比較
  3. 特定クラスのspanを挿入
  4. ThemeのCSSに色指定を記述

という流れで実装しています。

./data/categories.yml
1"オリジナル小説": "originalcat"
2"tech": "techcat"
3"game": "gamecat"

Data Templateに実際のカテゴリ設定と対応した連想配列を用意します。次に、partialテンプレートでカテゴリごとに異なるclassがついたspanを出力するよう処理します。

./themes/Museum/layouts/partials/coloredcategories.html
1{{ $d := .Site.Data.categories }}
2{{- with .Params.categories }}
3{{- $catname := index . 0 -}}
4{{range $key,$val := $d}}
5  {{- if eq $key $catname -}}<span class="{{ $val }}"><a href="/categories/{{ $catname }}/">{{ $catname }}</a></span>{{- end -}}
6{{- end -}}
7{{- end -}}

CSSで別々の色を指定します。

./themes/Museum/static/css/museum.css
 1.techcat > a,
 2.gamecat > a ,
 3.originalcat > a { 
 4    padding : 2px 8px;
 5    text-decoration : none ;
 6    border-radius : 10px ;
 7    margin : 0 8px ;
 8    font-size : 1.24rem;
 9}
10
11.techcat > a {
12    background: #3f51b5;
13    color: #fff;
14}
15.gamecat > a {
16    background:#795548;
17    color: #fff;
18}
19.originalcat > a {
20    background:#d3afba;
21    color: #fff;
22}

該当の箇所で{{ partial "coloredcategories.html" . }}と読み込んでやればオーケーです。

Series

シリーズはこのHugoの記事でも使っていますが、記事の末尾にナビゲーションをつけようと思います。公式ドキュメントにある例ではうまく働かなかったりと苦戦したのですが、最終的にはAdding support for multiple series per post — in Hugo :: Cavelab blog — Stories from the Cavelabにあるコードを丸っと利用させていただいています。

ちょっと長いのでこれもPartialテンプレートに分化して読み込んでいます。

./themes/Museum/layouts/partials/series.html
 1{{- with (.GetTerms "series") -}}
 2  {{- range . -}}
 3    <details><summary>{{ .Title }} series</summary>
 4    {{- $series := .Pages.ByDate -}}
 5    <ul class="series">
 6      {{- range $series -}}
 7      <li>
 8        {{- if eq .File.UniqueID $.File.UniqueID -}}
 9          <time>{{.Date.Format "2006-01-02"}}</time> - <b>{{ .Title }}</b>
10        {{- else -}}
11          <time>{{.Date.Format "2006-01-02"}}</time> - <a href="{{ .Permalink }}">{{ .Title }}</a>
12        {{- end -}}
13      </li>
14      {{- end -}}
15    </ul></details>
16  {{- end -}}
17{{- end -}}

<details>要素で折りたたんだりしてみたり。なぜか、日本語だとうまく動かなかったのでシリーズ名は全部英数字です。英語力～！

これで記事表示（＝小説本文などの表示）は完成したと思います。実際の表示はムッシュ・ド・パリは迷わない一話で確認してみてくれよな！

いい加減このシリーズも長引いてきたので、今後の予定です。

などを扱って終わろうと思います。改善点や取り扱ってほしい内容、わからないところはお問い合わせください。

( ｀・∀・´)ﾉﾖﾛｼｸ

関連記事