静的サイトジェネレータHugoを使ったサイト構築（Taxonomy編）

こんにちは、tamaoki (@t0shiya) です。

今回は、静的サイトジェネレータ Hugo の Taxonomy ついて。

Taxonomy （タクソノミー）とは、ざっくり言うとコンテンツをグルーピングする 分類 のことです。

Hugo ではデフォルトで tags と categories の２つの Taxonomy が定義されています。Taxonomy を使用すると Hugo は自動的に Taxonomy 自体のリスト(tags, categories, …)、各Taxonomy毎のキーのリスト、各Taxonomyに紐づくコンテンツのリストを生成します。

定義

公式ドキュメントに記載されている俳優(Actor)というTaxonomyと出演作品（Content）の例をあげます。

Actor                    <- Taxonomy
    Bruce Willis         <- Term
        The Six Sense    <- Content
        Unbreakable      <- Content
    Samuel L. Jackson    <- Term
        Unbreakable      <- Content
        The Avengers     <- Content

同じ内容をContentでまとめると次のようになります。

Unbreakable                 <- Content
    Actors                  <- Taxonomy
        Bruce Willis        <- Term
        Samuel L. Jackson   <- Term
The Six Sense
    Actors                  <- Taxonomy
        Bruce Willis        <- Term
The Avengers
    Actors                  <- Taxonomy
        Samuel L. Jackson   <- Term

設定

コンテンツ編１ でも記載したように tag, category 以外の Taxonomy を利用するためには config.toml に定義を記載しなければいけません。

// config.toml
[taxonomies]
tag = "tags"
category = "categories"
series = "series"

左辺が Taxonomy の名前（SINGULAR key）で、右辺がそれをコンテンツに紐づけるための値（PLURAL value）です。
フロントマターには右辺の tags, categories, series を指定します。

使用方法

コンテンツのテンプレートで、そのコンテンツが紐づく Taxonomy は変数 .Params を介してアクセスできます。
例えば、自身の紐づくtags の Term リストは以下のように表示します。

<ul id="tags">
  {{ range .Params.tags }}
    <li><a href="tags/{{ . | urlize }}">{{ . }}</a> </li>
  {{ end }}
</ul>

全ての Taxonomy の情報は変数 .Site.Taxonomies に格納されています。
例えば、サイト全体で使用されている tags の Term とコンテンツのリストは以下のように表示します。

<ul id="all-tags">
  {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
    <li><a href="/tags/{{ $name | urlize }}">{{ $name }}</a></li>
    <ul>
        {{ range $taxonomy.Pages }}
        <li hugo-nav="{{ .RelPermalink}}"><a href="{{ .Permalink}}"> {{ .LinkTitle }} </a> </li>
        {{ end }}
    </ul>
  {{ end }}
</ul>

上の例の $name には Term が、$taxonomy には Term に紐づくコンテンツの情報が格納されています。

リストテンプレート

Termのリスト

Taxonomy の Term のリストは /PLURAL/ （PLURAL は config.toml の右辺： /tags/, /categories/）というURLで生成されます。
使用されるテンプレートは以下の順に検索されます。

1. /layouts/taxonomy/SINGULAR.terms.html
   （SINGULAR は config.toml の左辺： tag, category）
2. /layouts/_default/terms.html

どちらも存在しない場合はページは生成されません。 上のテンプレートでは Term は変数 .Data.Terms に格納されています。

<ul>
  {{ $data := .Data }}
  {{ range $key, $value := .Data.Terms }}
    <li><a href="{{ $data.Plural }}/{{ $key | urlize }}">{{ $key }}</a> {{ len $value }}</li>
  {{ end }}
</ul>

http://gohugo.io/templates/terms/

Termに紐づくコンテンツのリスト

特定の Term に紐づくコンテンツのリストは /PLURAL/Term/ (例えば /tags/hugo/) というURLで生成されます。
使用されるテンプレートは以下の順に検索されます。

1. /layouts/taxonomy/SINGULAR.html (例： /layouts/taxonomy/topic.html)
2. /layouts/_default/taxonomy.html
3. /layouts/_default/list.html
4. /themes/THEME/layouts/taxonomy/SINGULAR.html
5. /themes/THEME/layouts/_default/taxonomy.html
6. /themes/THEME/layouts/_default/list.html

上のテンプレートでは変数 .Data.Pages にコンテンツの情報が格納されています。

{{ range .Data.Pages }}
<li>
<a href="{{ .Permalink }}">{{ .Title }}</a>
<div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
</li>
{{ end }}

http://gohugo.io/templates/list/

feedtailor では、静的サイトジェネレータの利用に限らず、ウェブサイト静的化の御相談を承っておりますのでお気軽にお問い合わせください。