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>