はじめに

HugoのTaxonomyテンプレートの使い方を紹介します。

Taxonomyとは

HugoではTaxonomy関連の用語を、以下のように定義しています。英文の下に私なりの訳を付けてみました。

Taxonomy

a categorization that can be used to classify content
コンテンツの分類に使われるカテゴリ分け

Term

a key within the taxonomy
Taxonomy内のキー

Value

a piece of content assigned to a term
Termに割り当てられたコンテンツのまとまり

Hugoでは、複数のカテゴリ分けを行うことができ、各コンテンツでは、それぞれのカテゴリに対して、複数のキーを割り当てることができます。

設定

コンテンツにTaxonomyを割り当てるためには、設定ファイルに、Taxonomy関連の設定を行う必要があります。デフォルトでは、以下の設定が行われています。この設定は、taxonomiesに関する設定を全く行わない場合に適用されます。

1
2
3

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

上記の場合、「tag」というTaxonomy(カテゴリ分け)と、「category」というTaxonomy(カテゴリ分け)を定義しています。このとき、hugoは以下のようなHTML構成を生成します。term1などは、コンテンツに割り当てた、Term(カテゴリ分けごとのキー)です。

コンテンツ内での定義

定義したTaxonomy(カテゴリ分け)に対して、各コンテンツでTerm(キー)を割り当てます。例えば、上記の設定にある、tagに対して、hugoとtaxonomyというTerm(キー)を割り当てるには、フロントマターに、以下のように定義します。

1

tags = ["hugo", "taxonomy"]

テンプレート

TaxonomyページとTermページに適用されるテンプレートは、それぞれ、TaxonomyページとTermsページを参照してください。

私は、Taxonomyページには、terms.html、Termページには、term.htmlを利用しています。

Taxonomyページ

Taxonomy(カテゴリ分け)ページでは、Taxonomy内のTerm(キー)の一覧と、Termに紐づくTermページ(Termに割り当てられているコンテンツ一覧をまとめたページ)へのリンクを扱います(他のことを扱ってはいけないということではありません)。

Taxonomyページでは、.Dataに、Taxonomyに関連する情報が格納されています。Taxonomyに関連するTagの情報は、.Data.Termsに格納されています。.Data.Termsから直接Termにアクセスもできますが、以下に示すソートに関する変数が用意されています。これらの変数を使うことで、Taxonomy内の各Termにアクセスすることができます。

上記で取り出したTermに関する情報に対して、以下の変数が用意されています

例えば、以下では、Termページへのリンクと、Termに関連するページ数を表示します。

1
2
3
4
5

<ul>
{{ range .Data.Terms.Alphabetical }}
    <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>({{ .Count }})</li>
{{ end }}
</ul>

Termページ

Term(キー)ページでは、Term(キー)に紐づくHTMLページへのリンクを扱います(他のことを扱ってはいけないということではありません)。

Termページでは、.Pagesに、Termに紐づくHTMLページ情報が格納されています。

例えば、以下では、Termに紐づくHTMLページ情報のリストを表示します。

1
2
3
4
5

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

その他のページからのTaxonomyへのアクセス

.Site.Taxonomyに、Taxonomyに関連する情報が格納されています。

例えば、以下では、tagsに定義したHugoに関連するページ情報のリストを表示します。

1
2
3
4
5

<ul>
    {{ range .Site.Taxonomies.tags.Hugo }}
    <li><a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a></li>
    {{ end }}
</ul>

Taxonomyページ、Termページ

Taxonomyページ(例: /tags/index.html)やTermページ(例: /tags/Hugo/index.html)は、Hugoにより自動生成されます。このため、テンプレートだけで全てが完結する場合は、当該ページの基となるマークダウンページ(例: /content/tags/index.md)を作成する必要はありません。

これらのページに、メタデータやコンテンツを付与したい場合は、マークダウンファイルを作成することで対応できます。このとき作成するファイル名は、(index.mdではなく)_index.md です。

日本語文字コードTermに関するURLを英数字にする

例えば、このサイトが利用しているホームページサービスでは、ファイル名やディレクトリ名に日本語文字コードを利用することができません。しかし、Hugoは、日本語文字コードのTermに対しては、日本語文字コードのままでディレクトリを作成します。

ウェブページを作成しているローカルシステムでは、日本語文字コードのディレクトリを作成できるので、Termとして利用したキーワード名のディレクトリを、tags配下に作成し、_index.mdを作成し、そこで、slugを設定するようにしています。これにより、日本語文字コードのTermを英数字のURLでアクセスできるようにしています。

このサイトでは、以下の設定を行っています。

• config.toml
  • permalinksの作成方法を設定。

    1 2	[permalinks] tags = "/tags/:slug"

• content/tags/日本語文字コードTerm/_index.ja.md
  • titleとslugを設定。以下は、「設定」に対する設定。

    1 2 3 4

    +++ title = "設定" slug = "configuration" +++

上記の設定で、「設定」というTermに関しては、設定の前後場合で、URLは以下のようになります。

• 設定前: /tags/設定/index.html
• 設定後: /tags/configuration/index.html

ただし、全ての日本語文字コードTermについて、同様の作業を行う必要があります。

最終更新日

February 13, 2021