[Hugo] タグを追加する

2016-08-19

タグ一覧ページと記事の先頭にタグを追加

Hugoの記事は、markdownファイルの先頭に下記の様に書くことで、その記事にタグを付けることができる。

tags = ["Hugo", "html", ...]

ただしこれらの一覧を表示したり、記事の先頭にタグを表示したりするには、layoutsフォルダ以下のテンプレートを追加、作成しないといけない。最終的には下記の様に対応を行ったが、これもなかなかわかりにくかったので記事にしておく。

http://baseurl/tagsでタグ一覧ページを表示する。
例えばHugoに関する記事の場合、http://baseurl/tags/hugoでその一覧を表示する。
各記事の先頭にタグを表示する。

タグ一覧ページの作成

config.tomlファイルにタグ一覧の設定を追加する。
layouts/taxonomyフォルダにtag.terms.htmlとtag.htmlというファイルを作成する。
ファイル変更後、hugo serverを起動させて確認する。http://baseurl/tags/で一覧が表示される。

config.toml

1[taxonomies]
2tag = "tags"

この設定だが非常に紛らわしいので注意

[taxonomies]の所には、何かしらの一覧を表示したいものを定義するようになっている。
今回の記事ではタグについて書いているが、カテゴリなどを追加することも可能。
そして何故かよくわからないが、単数形 = "複数形"の様に定義する。
すると、layouts/taxonomy/単数形.terms.htmlがタグ全体の一覧、layouts/taxonomy/単数形.htmlが各タグの一覧になる。
- 単数形.terms.htmlや単数形.htmlがない場合は、layouts/_defaultやthemes/テーマ名/layouts/フォルダにあるものが採用される。
一覧のURLはhttp://baseurl/複数形/となる。
各記事の先頭に書く一覧リストは、複数形 = ["xxx", "yyy", ..]となる。

layouts/taxonomy/tag.terms.html

 1:
 2<section id="main">
 3  <div>
 4    <h1 id="title">{{ .Title }}</h1>
 5    <div class="tags_list">
 6    {{ range $key, $value := .Data.Terms }}
 7        <div class="tags_item">
 8            <a href="{{ $key | urlize }}">{{ $key }} <span class="tags_number">{{ len $value }}</span></a>
 9        </div>
10    {{ end }}
11    </div>
12  </div>
13</section>
14:

上記は、tag.terms.htmlの一部。
このファイルを元に、public/tags/index.htmlが作成される。
.Titleには複数形の値が入っている。(先頭は大文字になる)
.Data.Termsでタグ一覧が取得できる。

layouts/taxonomy/tag.html

 1:
 2<section id="main">
 3    <div class="tags_list">
 4    <div class="tags_title"><span>{{ .Title }}</span></div>
 5    </div>
 6    <ul id="list">
 7        {{ range .Data.Pages }}
 8        <li>
 9            {{ .Date.Format "2006-01-02" }}
10            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
11        </li>
12        {{ end }}
13    </ul>
14    <hr>
15    <a href="{{ .Site.BaseURL }}/tags">Tags</a>
16</section>
17:

上記は、tag.htmlの一部。
このファイルを元に、public/tags/タグ名/index.htmlが作成される。
.Titleにはタグ名の値が入っている。(先頭は大文字になる)
.Data.Pagesでそのタグに関する記事一覧が取得できる。

public フォルダの出力例

public
└──tags
   ├── index.html
   ├── tagA
   │   ├── index.html
   │   └── index.xml
   ├── tagB
   │   ├── index.html
   │   └── index.xml
   :

各記事の先頭にタグを表示する

blogの記事について、各記事の先頭にタグを表示したい。layouts/blog/single.htmlを編集する。

layouts/blog/single.html

1:
2{{ with .Params.tags }}
3<div class="tags_list">
4  {{ range . }} <div class="tags_item"><a href="/tags/{{ lower . }}/">{{ . }}</a></div>{{ end }}
5</div>
6{{ end }}
7:

上記は、single.htmlの一部。
記事のタグは.Params.tagsで取得できる。
linkアドレスは全て小文字にする必要がある。{{ lower . }}の様にする必要がある。