Categories や Tags の一覧ページを作る

今回は補足なので簡単に。

Categories, Tags そして Section」の回で紹介してなかったのだが1, Categories や Tags の一覧ページを作る機能があるので紹介する。

Categories や Tags の一覧ページを作るには layouts/_default フォルダに terms.html テンプレートを作成する2。 たとえば中身はこんな感じ。

<!DOCTYPE html>
{{ with .Site.LanguageCode }}<html lang="{{ . }}">{{ else }}<html>{{ end }}
<head>
<meta charset="utf-8">
<title>{{ .Title }} Cloud -- {{ .Site.Title }}</title>
<style>
ul.cloud {
    list-style: none;
    padding: 0
}
ul.cloud > li {
    display: inline-block;
    margin: 0 0.5rem;
}
</style>
</head>
<body>
<h1>{{ .Title }} Cloud</h1>

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

</body>
<html>

以前の記事Taxonomy の記述に似ているので,それほど難しくないだろう。 これをビルドするとこんな感じにファイルが展開される。

C:\hugo-env\www>hugo
0 draft content
0 future content
1 pages created
0 paginator pages created
2 tags created
1 categories created
in 17 ms

C:\hugo-env\www>tree /f .
C:\HUGO-ENV\WWW
│  config.toml
├─archetypes
├─content
│  └─practice
│          hello.md
├─data
├─layouts
│  │  404.html
│  │  index.html
│  │
│  ├─practice
│  │      single.html
│  │
│  ├─section
│  │      practice.html
│  │
│  └─_default
│          list.html
│          single.html
│          terms.html
├─public
│  │  404.html
│  │  index.html
│  │  index.xml
│  │  sitemap.xml
│  │
│  ├─categories
│  │  │  index.html
│  │  │
│  │  └─hugo
│  │          index.html
│  │          index.xml
│  │
│  ├─practice
│  │  │  index.html
│  │  │  index.xml
│  │  │
│  │  └─hello
│  │          index.html
│  │
│  └─tags
│      │  index.html
│      │
│      ├─hello
│      │      index.html
│      │      index.xml
│      │
│      └─world
│              index.html
│              index.xml
└─static

public/categories および public/tags フォルダの直下に index.html ファイルが生成されているのがお分かりだろうか。 また public/tags/index.html ファイルの中身を見てみると以下のように Tags 情報が展開されている。

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Tags Cloud -- Hello World!</title>
<style>
ul.cloud {
    list-style: none;
    padding: 0
}
ul.cloud > li {
    display: inline-block;
    margin: 0 0.5rem;
}
</style>
</head>
<body>
<h1>Tags Cloud</h1>

<ul class="cloud">

    <li><a href="/tags/hello">hello</a> (1)</li>

    <li><a href="/tags/world">world</a> (1)</li>

</ul>

</body>
<html>

ブックマーク

Hugo に関するブックマークはこちら


  1. というか,今までやり方が分かってなかった。 ↩︎

  2. Tags や Categories などごとに個別にテンプレートを作りたいのであれば layouts/taxonomy/tag.terms.html といった感じでファイルを作るとよい。 ↩︎