Hugoを使うページ
静的サイトジェネレータのHugoを使った結果を残すページです
コンテンツ分類(Taxonomy)

はじめに

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(カテゴリ分けごとのキー)です。

  • /
    • tags/ ← 設定ファイルで設定した taxonomy
      • index.html
      • term1/ ← ページで割り当てた term
        • index.html
      • term2/
        • index.html
      • …/
        • index.html
    • categories/
      • index.html
      • term3/
        • index.html
      • term4/
        • index.html
      • …/
        • index.html

コンテンツ内での定義

定義した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にアクセスすることができます。

変数 説明
.Data.Terms.Alphabetical アルファベット順(昇順)でのソート
.Data.Terms.Alphabetical.Reverse アルファベット順(降順)でのソート
.Data.ByCount 要素数順(昇順)でのソート
.Data.Bycount.Reverse 要素数順(降順)でのソート

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

変数 説明 備考
.変数 Term
.WeightedPages 重み付きページ
.Count Termに関連するページ数
.Pages Termに関連するページ
.Page 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に関連する情報が格納されています。

アクセス方法 説明
.Site.Taxonomy Taxonomyに関連するすべての情報
.Site.Taxonomy.tags tagsに関連するTaxonomyに関する情報
.Site.Taxonomy.tags.Hugo tagsのHugoに関連する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

inserted by FC2 system