List of categories - Baldanders.info
tag:Baldanders.info,2015-10-04:/tags
2015-10-04T20:21:54+09:00
バルトアンデルスは連続的な怪物,時間の怪物である。(ホルヘ・ルイス・ボルヘス 『幻獣辞典』より)
https://baldanders.info/images/avatar.jpg
https://baldanders.info/images/avatar.jpg
Categories や Tags の一覧ページを作る
tag:Baldanders.info,2015-10-04:/hugo/categories-and-tags-list/
2015-10-04T11:21:54+00:00
2015-10-04T11:21:54+00:00
以前の回で紹介してなかったのだが, Categories や Tags の一覧ページを作る機能があるので紹介する。
Spiegel
/profile/
<p>今回は補足なので簡単に。</p>
<p>「<a href="https://baldanders.info/hugo/section/">Categories, Tags そして Section</a>」の回で紹介してなかったのだが<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>, Categories や Tags の一覧ページを作る機能があるので紹介する。</p>
<p>Categories や Tags の一覧ページを作るには <code>layouts/_default</code> フォルダに <code>terms.html</code> テンプレートを作成する<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。
たとえば中身はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl">{{ with .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>{{ .Title }} Cloud -- {{ .Site.Title }}<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">style</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="nt">ul</span><span class="p">.</span><span class="nc">cloud</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">list-style</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="nt">ul</span><span class="p">.</span><span class="nc">cloud</span> <span class="o">></span> <span class="nt">li</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span> <span class="mf">0.5</span><span class="kt">rem</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">style</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>{{ .Title }} Cloud<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"cloud"</span><span class="p">></span>{{ $plural := .Data.Plural }}
</span></span><span class="line"><span class="cl">{{ range $key, $value := .Data.Terms }}
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/{{ $plural }}/{{ $key | urlize }}"</span><span class="p">></span>{{ $key }}<span class="p"></</span><span class="nt">a</span><span class="p">></span> ({{ len $value }})<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p><a href="https://baldanders.info/hugo/section/">以前の記事</a>の <a href="https://baldanders.info/hugo/section/">Taxonomy</a> の記述に似ているので,それほど難しくないだろう。
これをビルドするとこんな感じにファイルが展開される。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo
</span></span><span class="line"><span class="cl">0 draft content
</span></span><span class="line"><span class="cl">0 future content
</span></span><span class="line"><span class="cl">1 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">2 tags created
</span></span><span class="line"><span class="cl">1 categories created
</span></span><span class="line"><span class="cl">in 17 ms
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\hugo-env\www>tree /f .
</span></span><span class="line"><span class="cl">C:\HUGO-ENV\WWW
</span></span><span class="line"><span class="cl">│ config.toml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─archetypes
</span></span><span class="line"><span class="cl">├─content
</span></span><span class="line"><span class="cl">│ └─practice
</span></span><span class="line"><span class="cl">│ hello.md
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─data
</span></span><span class="line"><span class="cl">├─layouts
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─practice
</span></span><span class="line"><span class="cl">│ │ single.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─section
</span></span><span class="line"><span class="cl">│ │ practice.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─_default
</span></span><span class="line"><span class="cl">│ list.html
</span></span><span class="line"><span class="cl">│ single.html
</span></span><span class="line"><span class="cl">│ terms.html
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─public
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │ sitemap.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─categories
</span></span><span class="line"><span class="cl">│ │ │ index.html
</span></span><span class="line"><span class="cl">│ │ │
</span></span><span class="line"><span class="cl">│ │ └─hugo
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─practice
</span></span><span class="line"><span class="cl">│ │ │ index.html
</span></span><span class="line"><span class="cl">│ │ │ index.xml
</span></span><span class="line"><span class="cl">│ │ │
</span></span><span class="line"><span class="cl">│ │ └─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─tags
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─world
</span></span><span class="line"><span class="cl">│ index.html
</span></span><span class="line"><span class="cl">│ index.xml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">└─static
</span></span></code></pre></div><p><code>public/categories</code> および <code>public/tags</code> フォルダの直下に <code>index.html</code> ファイルが生成されているのがお分かりだろうか。
また <code>public/tags/index.html</code> ファイルの中身を見てみると以下のように Tags 情報が展開されている。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"jp"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Tags Cloud -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">style</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="nt">ul</span><span class="p">.</span><span class="nc">cloud</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">list-style</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="nt">ul</span><span class="p">.</span><span class="nc">cloud</span> <span class="o">></span> <span class="nt">li</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span> <span class="mf">0.5</span><span class="kt">rem</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">style</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Tags Cloud<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"cloud"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/hello"</span><span class="p">></span>hello<span class="p"></</span><span class="nt">a</span><span class="p">></span> (1)<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/world"</span><span class="p">></span>world<span class="p"></</span><span class="nt">a</span><span class="p">></span> (1)<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><h2 id="bookmark">ブックマーク</h2>
<ul>
<li><a href="https://gohugo.io/templates/terms/">Taxonomy Terms Template</a></li>
<li><a href="http://wdkk.co.jp/lab/hugo/">Hugoサイト構築 | Watanabe-DENKI Inc. 渡辺電気株式会社</a> : お勧め!</li>
<li><a href="http://qiita.com/_shun_sato_/items/87888fa8425e55b1c758">Hugoでタグやカテゴリのリンク切れが起こる - Qiita</a></li>
</ul>
<p><a href="https://baldanders.info/hugo/bookmark/">Hugo に関するブックマークはこちら</a>。</p>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>というか,今までやり方が分かってなかった。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p>Tags や Categories などごとに個別にテンプレートを作りたいのであれば <code>layouts/taxonomy/tag.terms.html</code> といった感じでファイルを作るとよい。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
Categories, Tags そして Section
tag:Baldanders.info,2015-09-11:/hugo/section/
2015-09-11T08:58:32+00:00
2015-09-11T08:58:32+00:00
前回の続き。今回は Categories, Tags そして Section について書いてみる。
Spiegel
/profile/
<p>(初出: <a href="http://qiita.com/spiegel-im-spiegel/items/4c5859f7cac877068742">ゼロから始める Hugo — Categories, Tags そして Section - Qiita</a>)</p>
<p><a href="https://baldanders.info/hugo/hello/" title="インストールから Hello World まで">前回</a>の続き。
今回は Categories, Tags そして Section について書いてみる。</p>
<h2 id="categories-tags">Categories と Tags</h2>
<p>まずは Categories と Tags について。</p>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では記事に Categories および Tags を設定することができる。
以下のように記述すれば良い。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">date = "2015-09-05T16:40:41+09:00"
</span></span><span class="line"><span class="cl">draft = false
</span></span><span class="line"><span class="cl">title = "Hello!"
</span></span><span class="line"><span class="cl">categories = [ "hugo" ]
</span></span><span class="line"><span class="cl">tags = [ "hello", "world" ]
</span></span><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">ようこそ, [<span class="nt">Hugo</span>](<span class="na">https://gohugo.io/</span>) の世界へ!
</span></span></code></pre></div><p>このように Categories および Tags のキーワードを配列で列挙する(キーワードがひとつでも配列に入れること)。
これをビルドすると以下のようになる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo
</span></span><span class="line"><span class="cl">0 draft content
</span></span><span class="line"><span class="cl">0 future content
</span></span><span class="line"><span class="cl">1 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">2 tags created
</span></span><span class="line"><span class="cl">1 categories created
</span></span><span class="line"><span class="cl">in 20 ms
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\hugo-env\www>tree /f .
</span></span><span class="line"><span class="cl">C:\HUGO-ENV\WWW
</span></span><span class="line"><span class="cl">│ config.toml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─archetypes
</span></span><span class="line"><span class="cl">├─content
</span></span><span class="line"><span class="cl">│ hello.md
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─data
</span></span><span class="line"><span class="cl">├─layouts
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─_default
</span></span><span class="line"><span class="cl">│ single.html
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─public
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │ sitemap.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─categories
</span></span><span class="line"><span class="cl">│ │ └─hugo
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─tags
</span></span><span class="line"><span class="cl">│ ├─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─world
</span></span><span class="line"><span class="cl">│ index.html
</span></span><span class="line"><span class="cl">│ index.xml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">└─static
</span></span></code></pre></div><p>出力先に <code>categories</code> および <code>tags</code> フォルダが作成され,更にその下にキーワードのフォルダが作成されているのがおわかりだろうか。
キーワードのフォルダの <code>index.xml</code> は feed である。
つまり <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> ではカテゴリ・タグ毎に自動で feed が作成される。</p>
<p><code>index.html</code> は(テンプレートがないため)この時点では空である。テンプレートは <code>layouts/_default</code> フォルダに <code>list.html</code> ファイルを配置する。
名前からして Categories/Tags 毎に記事を列挙することを期待しているわけやね(笑) とりあえず中身はこんな感じでどうだろう。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl">{{ with .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>List of {{ .Title }} -- {{ .Site.Title }}<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>List of {{ .Title }}<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">style</span><span class="o">=</span><span class="s">"list-style:none;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ range .Data.Pages }}
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{ .Permalink }}"</span><span class="p">></span>{{ .Title }}<span class="p"></</span><span class="nt">a</span><span class="p">></span> (<span class="p"><</span><span class="nt">time</span><span class="p">></span>{{ .Date.Format "2006-01-02" }}<span class="p"></</span><span class="nt">time</span><span class="p">></span>){{ if .Draft }} #Draft{{ end }}<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>ビルド結果はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>List of Hugo -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>List of Hugo<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">style</span><span class="o">=</span><span class="s">"list-style:none;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/hello/"</span><span class="p">></span>Hello!<span class="p"></</span><span class="nt">a</span><span class="p">></span> (<span class="p"><</span><span class="nt">time</span><span class="p">></span>2015-09-05<span class="p"></</span><span class="nt">time</span><span class="p">></span>)<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>おおう。キーワードの頭文字が勝手に大文字に変換されてるぜ。</p>
<p><a href="https://baldanders.info/hugo/hello/" title="インストールから Hello World まで">前回</a>を読んでいる人はトップページのテンプレート <code>layouts/index.html</code> とほぼ同じ構成であることに気づくと思う。
違うのは <code>{{ .Title }}</code> には Categories/Tags のキーワードが入ることと <code>{{ range }}</code> 構文の対象変数が <code>.Site.Pages</code> ではなく <code>.Data.Pages</code> であることだ。</p>
<p>ついでに記事ページで Categories/Tags を表示できるようにしてみよう。
<code>layouts/_default/single.html</code> を以下のように記述する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl">{{ with .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>{{ .Title }} -- {{ .Site.Title }}<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>{{ .Title }}<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> {{ with .Params.categories }}<span class="p"><</span><span class="nt">div</span><span class="p">></span>Categories:{{ range . }} <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/categories/{{ . | urlize }}/"</span><span class="p">></span>{{ . }}<span class="p"></</span><span class="nt">a</span><span class="p">></span>{{ end }}<span class="p"></</span><span class="nt">div</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"> {{ with .Params.tags }}<span class="p"><</span><span class="nt">div</span><span class="p">></span>Tags:{{ range . }} <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/{{ . | urlize }}/"</span><span class="p">></span>#{{ . }}<span class="p"></</span><span class="nt">a</span><span class="p">></span>{{ end }}<span class="p"></</span><span class="nt">div</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">></span>{{ .Content }}<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>以下がビルド結果。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello! -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Categories: <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/categories/hugo/"</span><span class="p">></span>hugo<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Tags: <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/hello/"</span><span class="p">></span>#hello<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/world/"</span><span class="p">></span>#world<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">><</span><span class="nt">p</span><span class="p">></span>ようこそ, <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://gohugo.io/"</span><span class="p">></span>Hugo<span class="p"></</span><span class="nt">a</span><span class="p">></span> の世界へ!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p><code>{{ with }}</code> 構文の中に <code>{{ range }}</code> 構文が入ってて分かりにくいが,変数のスコープに注意すれば,それほど難しくはないはず。
注意しないといけないのは, Categories/Tags の変数名が <code>.Categories</code>, <code>.Tags</code> ではなく <code>.Params.categories</code>, <code>.Params.tags</code> になっている点である。</p>
<p><code>{{ . | urlize }}</code> というのはパイプ機能の一種で, <code>urlize</code> であれば左側の値(文字列)を URL として安全な文字列に変換してくれる。</p>
<p>Categories と Tags との間に機能上の違いはない。
名前が違うだけである。
おそらく他のブログサービスとの互換性の為にあるのだろうが,「ゼロから始める」のであれば Categories と Tags を併記することに意味はない。
それなら後述する Section と組み合わせるほうが合理的である。</p>
<h3 id="params">.Params のルール</h3>
<p>Front matter で指定する変数は,「<a href="https://gohugo.io/templates/variables/">テンプレート変数</a>」にある既定のもの以外は <code>.Params</code> 以下に自動的に組み換えられる。
なおかつ <code>.Params</code> 以下の変数名は小文字になる決まりである。
Categories/Tags は標準機能なのだが,どういうわけかこれだけ <code>.Params</code> 以下に組み替えられる。
なんだかなぁ。「歴史的経緯」ってやつだろうか<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。</p>
<p>ちなみに <code>config.toml</code> によるサイト設定では <code>.Site.Params</code> への暗黙的な組み換えは行われないため,明示的に記述する必要がある。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-ini" data-lang="ini"><span class="line"><span class="cl"><span class="k">[params]</span>
</span></span><span class="line"><span class="cl"><span class="na">author</span> <span class="o">=</span> <span class="s">"Spiegel"</span>
</span></span></code></pre></div><p>この非対称性も分かりにくいんだよなぁ。</p>
<h3 id="taxonomy">Taxonomy</h3>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> には Taxonomy と呼ばれる機能があって,標準では Categories/Tags のリストを取り出すことができる<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。
たとえば, <code>layouts/index.html</code> をこんな感じに書く。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h2</span><span class="p">></span>Taxonomy Terms<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span><span class="p">></span>{{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>{{ $taxonomyname }}
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span><span class="p">></span>{{ range $key, $value := $taxonomy }}
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/{{ $taxonomyname | urlize }}/{{ $key | urlize }}"</span><span class="p">></span>{{ $key }}<span class="p"></</span><span class="nt">a</span><span class="p">></span> ({{ $value.Count }})
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span><span class="p">></span>{{ range $value.Pages }}
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{ .Permalink }}"</span><span class="p">></span>{{ .LinkTitle }}<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> {{ end }}<span class="p"></</span><span class="nt">ul</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> {{ end }}<span class="p"></</span><span class="nt">ul</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ end }}<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span></code></pre></div><p>これをビルドするとこんな感じに展開される。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h2</span><span class="p">></span>Taxonomy Terms<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>categories
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/categories/hugo"</span><span class="p">></span>hugo<span class="p"></</span><span class="nt">a</span><span class="p">></span> (1)
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/hello/"</span><span class="p">></span>Hello!<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>tags
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/hello"</span><span class="p">></span>hello<span class="p"></</span><span class="nt">a</span><span class="p">></span> (1)
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/hello/"</span><span class="p">></span>Hello!<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/world"</span><span class="p">></span>world<span class="p"></</span><span class="nt">a</span><span class="p">></span> (1)
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/hello/"</span><span class="p">></span>Hello!<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span></code></pre></div><p>Tags の一覧のみを取得したいのであれば,もっと簡単に</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h2</span><span class="p">></span>Tags<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span><span class="p">></span>{{ range $key, $value := .Site.Taxonomies.tags.ByCount }}
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>#<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/{{ $key | urlize }}"</span><span class="p">></span>{{ $key }}<span class="p"></</span><span class="nt">a</span><span class="p">></span> ({{ $value.Count }})<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ end }}<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span></code></pre></div><p>でもよい。
ちなみに <code>.Site.Taxonomies.tags.ByCount</code> は Tags の一覧をタグされている記事数の順で sort したものである。
アルファベット順にするには <code>.Site.Taxonomies.tags.Alphabetical</code> とする。</p>
<p>(追記: Categories/Tags の一覧ページを作る方法は<a href="https://baldanders.info/hugo/categories-and-tags-list/">こちら</a>)</p>
<h2 id="section">Section</h2>
<p><code>content</code> フォルダの下に <code>practice</code> というフォルダを作り,ここに <code>hello.md</code> を移動させてみよう。
新たに作る場合は path 付きで作成すればよい。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo new practice/hello.md
</span></span><span class="line"><span class="cl">C:\hugo-env\www\content\practice\hello.md created
</span></span></code></pre></div><p>これでビルドしてみる(ファイルを移動した際は出力フォルダの中をいったんクリーンにしてからビルドするとゴミが残らない)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo
</span></span><span class="line"><span class="cl">0 draft content
</span></span><span class="line"><span class="cl">0 future content
</span></span><span class="line"><span class="cl">1 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">2 tags created
</span></span><span class="line"><span class="cl">1 categories created
</span></span><span class="line"><span class="cl">in 19 ms
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\hugo-env\www>tree /f .
</span></span><span class="line"><span class="cl">C:\HUGO-ENV\WWW
</span></span><span class="line"><span class="cl">│ config.toml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─archetypes
</span></span><span class="line"><span class="cl">├─content
</span></span><span class="line"><span class="cl">│ └─practice
</span></span><span class="line"><span class="cl">│ hello.md
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─data
</span></span><span class="line"><span class="cl">├─layouts
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─_default
</span></span><span class="line"><span class="cl">│ list.html
</span></span><span class="line"><span class="cl">│ single.html
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─public
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │ sitemap.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─categories
</span></span><span class="line"><span class="cl">│ │ └─hugo
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─practice
</span></span><span class="line"><span class="cl">│ │ │ index.html
</span></span><span class="line"><span class="cl">│ │ │ index.xml
</span></span><span class="line"><span class="cl">│ │ │
</span></span><span class="line"><span class="cl">│ │ └─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─tags
</span></span><span class="line"><span class="cl">│ ├─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─world
</span></span><span class="line"><span class="cl">│ index.html
</span></span><span class="line"><span class="cl">│ index.xml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">└─static
</span></span></code></pre></div><p><code>hello/index.html</code> が <code>practice/hello/index.html</code> に配置されるのは予想通りだと思うが, <code>practice</code> に <code>index.html</code> と <code>index.xml</code> が生成されているのがおわかりだろうか。
<code>practice/index.html</code> の中身はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>List of Practices -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>List of Practices<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">style</span><span class="o">=</span><span class="s">"list-style:none;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/practice/hello/"</span><span class="p">></span>Hello!<span class="p"></</span><span class="nt">a</span><span class="p">></span> (<span class="p"><</span><span class="nt">time</span><span class="p">></span>2015-09-05<span class="p"></</span><span class="nt">time</span><span class="p">></span>)<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>これは <code>layouts/_default/list.html</code> テンプレートで生成されたページだ。
<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> ではフォルダ付きの記事を作成すると,そのフォルダが Section として機能する。</p>
<p>当然だが,ひとつの記事はひとつの Section にしか帰属できない。
これは先の Categories/Tags との大きな違いである。
Section と Categories/Tags を組み合わせれば縦串と横串で記事を指示できるようになる。</p>
<p>ついでに記事ページで Section を表示できるようにしてみよう。
たとえば, <code>layouts/_default/single.html</code> をこんな感じに書く。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl">{{ with .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>{{ .Title }}{{ with .Section }} -- {{ . }}{{ end }} -- {{ .Site.Title }}<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>{{ .Title }}{{ with .Section }} [<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/{{ . | urlize }}/"</span><span class="p">></span>{{ . }}<span class="p"></</span><span class="nt">a</span><span class="p">></span>]{{ end }}<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> {{ with .Params.categories }}<span class="p"><</span><span class="nt">div</span><span class="p">></span>Categories:{{ range . }} <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/categories/{{ . | urlize }}/"</span><span class="p">></span>{{ . }}<span class="p"></</span><span class="nt">a</span><span class="p">></span>{{ end }}<span class="p"></</span><span class="nt">div</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"> {{ with .Params.tags }}<span class="p"><</span><span class="nt">div</span><span class="p">></span>Tags:{{ range . }} <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/{{ . | urlize }}/"</span><span class="p">></span>#{{ . }}<span class="p"></</span><span class="nt">a</span><span class="p">></span>{{ end }}<span class="p"></</span><span class="nt">div</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">></span>{{ .Content }}<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>以下がビルド結果。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello! -- practice -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello! [<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/practice/"</span><span class="p">></span>practice<span class="p"></</span><span class="nt">a</span><span class="p">></span>]<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Categories: <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/categories/hugo/"</span><span class="p">></span>hugo<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Tags: <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/hello/"</span><span class="p">></span>#hello<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/world/"</span><span class="p">></span>#world<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">><</span><span class="nt">p</span><span class="p">></span>ようこそ, <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://gohugo.io/"</span><span class="p">></span>Hugo<span class="p"></</span><span class="nt">a</span><span class="p">></span> の世界へ!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>記事のフォルダ階層はいくらでも深くできるが, Section として認識されるのは直下のフォルダのみのようである。
たとえば <code>content/practice/hello.md</code> を <code>content/practice/firstcode/hello.md</code> に移動してビルドすると(出力フォルダはクリーンアップしてね)</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>tree /f .
</span></span><span class="line"><span class="cl">C:\HUGO-ENV\WWW
</span></span><span class="line"><span class="cl">│ config.toml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─archetypes
</span></span><span class="line"><span class="cl">├─content
</span></span><span class="line"><span class="cl">│ └─practice
</span></span><span class="line"><span class="cl">│ └─firstcode
</span></span><span class="line"><span class="cl">│ hello.md
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─data
</span></span><span class="line"><span class="cl">├─layouts
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─_default
</span></span><span class="line"><span class="cl">│ list.html
</span></span><span class="line"><span class="cl">│ single.html
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─public
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │ sitemap.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─categories
</span></span><span class="line"><span class="cl">│ │ └─hugo
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─practice
</span></span><span class="line"><span class="cl">│ │ │ index.html
</span></span><span class="line"><span class="cl">│ │ │ index.xml
</span></span><span class="line"><span class="cl">│ │ │
</span></span><span class="line"><span class="cl">│ │ └─firstcode
</span></span><span class="line"><span class="cl">│ │ └─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─tags
</span></span><span class="line"><span class="cl">│ ├─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─world
</span></span><span class="line"><span class="cl">│ index.html
</span></span><span class="line"><span class="cl">│ index.xml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">└─static
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello! -- practice -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello! [<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/practice/"</span><span class="p">></span>practice<span class="p"></</span><span class="nt">a</span><span class="p">></span>]<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Categories: <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/categories/hugo/"</span><span class="p">></span>hugo<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Tags: <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/hello/"</span><span class="p">></span>#hello<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/world/"</span><span class="p">></span>#world<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">><</span><span class="nt">p</span><span class="p">></span>ようこそ, <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://gohugo.io/"</span><span class="p">></span>Hugo<span class="p"></</span><span class="nt">a</span><span class="p">></span> の世界へ!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>というわけで,あくまでも <code>practice</code> フォルダが Section になっているのがわかると思う。</p>
<h3 id="section-custom">Section ごとのカスタマイズ</h3>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では Section ごとにカスタマイズすることができる。
<code>layouts</code> フォルダに <code>section</code> フォルダを作成し,その中に <code><section name>.html</code> ファイルを作成すると,そのテンプレートで Section のトップページ(<code><section name>/index.html</code>)を作成する。
今回は <code>layouts/section/practice.html</code> を作成してみる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl">{{ with .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hugo の練習 -- {{ .Site.Title }}<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hugo の練習<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">style</span><span class="o">=</span><span class="s">"list-style:none;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ range .Data.Pages }}
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{ .Permalink }}"</span><span class="p">></span>{{ .Title }}<span class="p"></</span><span class="nt">a</span><span class="p">></span> (<span class="p"><</span><span class="nt">time</span><span class="p">></span>{{ .Date.Format "2006-01-02" }}<span class="p"></</span><span class="nt">time</span><span class="p">></span>){{ if .Draft }} #Draft{{ end }}<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>ビルド結果。変わり映えしなくてすみません。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hugo の練習 -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hugo の練習<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">style</span><span class="o">=</span><span class="s">"list-style:none;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/practice/hello/"</span><span class="p">></span>Hello!<span class="p"></</span><span class="nt">a</span><span class="p">></span> (<span class="p"><</span><span class="nt">time</span><span class="p">></span>2015-09-05<span class="p"></</span><span class="nt">time</span><span class="p">></span>)<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>更に Section 内の記事ページもカスタマイズできる。
これは <code>layouts</code> フォルダに Section 名のフォルダを作成し,その中に <code>single.html</code> を配置する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl">{{ with .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>{{ .Title }} -- Hugo の練習 | {{ .Site.Title }}<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>{{ .Title }} -- Hugo の練習<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> {{ with .Params.categories }}<span class="p"><</span><span class="nt">div</span><span class="p">></span>Categories:{{ range . }} <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/categories/{{ lower . | urlize }}/"</span><span class="p">></span>{{ . }}<span class="p"></</span><span class="nt">a</span><span class="p">></span>{{ end }}<span class="p"></</span><span class="nt">div</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"> {{ with .Params.tags }}<span class="p"><</span><span class="nt">div</span><span class="p">></span>Tags:{{ range . }} <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/{{ lower . | urlize }}/"</span><span class="p">></span>#{{ . }}<span class="p"></</span><span class="nt">a</span><span class="p">></span>{{ end }}<span class="p"></</span><span class="nt">div</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">></span>{{ .Content }}<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello! -- Hugo の練習 | Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello! -- Hugo の練習<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Categories: <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/categories/hugo/"</span><span class="p">></span>hugo<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Tags: <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/hello/"</span><span class="p">></span>#hello<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/world/"</span><span class="p">></span>#world<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">nav</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">><</span><span class="nt">p</span><span class="p">></span>ようこそ, <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://gohugo.io/"</span><span class="p">></span>Hugo<span class="p"></</span><span class="nt">a</span><span class="p">></span> の世界へ!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>これも変わり映えしなくてすみません。</p>
<p>しかし,なんでこんなテンプレートの構成なんだろう。
これだと <code>section</code> や <code>_default</code> という名前のセクションはカスタマイズ出来ないことになる(まだ説明してないが <code>layouts</code> フォルダには他にも <code>partials</code> や <code>shortcodes</code> といったフォルダもある)。
そうではなくて, <code>layouts/section</code> フォルダの下にセクション名のフォルダを掘ってその中に <code>list.html</code> や <code>single.html</code> を配置すればスッキリするのに。</p>
<p>さきほどの <code>.Params</code> の話といい,どうも <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> は名前管理がいきあたりばったりな気がする。</p>
<h3 id="conflict">categories/hugo という名前の記事はどうなるの?</h3>
<p>これも名前に関する話。</p>
<p><code>categories/hugo.md</code> という名前の記事は <code>categories/hugo/index.html</code> に展開される。
これって Categories の機能と丸かぶりである。
実は <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では名前が衝突した際の挙動は明文化されていない(筈)。
強いて言うなら実装依存で状況依存である。またビルド時にエラーになることもない。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo new categories/hugo.md
</span></span><span class="line"><span class="cl">C:\hugo-env\www\content\categories\hugo.md created
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\hugo-env\www>hugo undraft content/categories/hugo.md
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\hugo-env\www>hugo
</span></span><span class="line"><span class="cl">0 draft content
</span></span><span class="line"><span class="cl">0 future content
</span></span><span class="line"><span class="cl">2 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">2 tags created
</span></span><span class="line"><span class="cl">1 categories created
</span></span><span class="line"><span class="cl">in 24 ms
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\hugo-env\www>tree /f .
</span></span><span class="line"><span class="cl">C:\HUGO-ENV\WWW
</span></span><span class="line"><span class="cl">│ config.toml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─archetypes
</span></span><span class="line"><span class="cl">├─content
</span></span><span class="line"><span class="cl">│ ├─categories
</span></span><span class="line"><span class="cl">│ │ hugo.md
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─practice
</span></span><span class="line"><span class="cl">│ hello.md
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─data
</span></span><span class="line"><span class="cl">├─layouts
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─_default
</span></span><span class="line"><span class="cl">│ list.html
</span></span><span class="line"><span class="cl">│ single.html
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─public
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │ sitemap.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─categories
</span></span><span class="line"><span class="cl">│ │ │ index.html
</span></span><span class="line"><span class="cl">│ │ │ index.xml
</span></span><span class="line"><span class="cl">│ │ │
</span></span><span class="line"><span class="cl">│ │ └─hugo
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─practice
</span></span><span class="line"><span class="cl">│ │ │ index.html
</span></span><span class="line"><span class="cl">│ │ │ index.xml
</span></span><span class="line"><span class="cl">│ │ │
</span></span><span class="line"><span class="cl">│ │ └─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─tags
</span></span><span class="line"><span class="cl">│ ├─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─world
</span></span><span class="line"><span class="cl">│ index.html
</span></span><span class="line"><span class="cl">│ index.xml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">└─static
</span></span></code></pre></div><p>上の場合は <code>categories/hugo/index.html</code> が記事ページになった。
他にも,このフォルダ構成なら <code>practice.md</code> も名前が衝突する。
このような衝突を避けるにはユーザ側で名前を管理するしかない。
小規模なサイトなら人間が気をつければいいが,中規模以上で複数人が関わるようになると結構危ないかもしれない。</p>
<h2 id="bookmark">ブックマーク</h2>
<ul>
<li><a href="http://wdkk.co.jp/lab/hugo/">Hugoサイト構築 | Watanabe-DENKI Inc. 渡辺電気株式会社</a> : お勧め!</li>
<li><a href="http://qiita.com/_shun_sato_/items/87888fa8425e55b1c758">Hugoでタグやカテゴリのリンク切れが起こる - Qiita</a></li>
</ul>
<p><a href="https://baldanders.info/hugo/bookmark/">Hugo に関するブックマークはこちら</a>。</p>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>Categories/Tags の配置が特殊なのは,これらが <a href="#taxonomy">Taxonomy</a> として実装されているからのようだ。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p>Taxonomy の項目は Categories/Tags 以外にも任意に設定することができる(<q lang="en"><a href="https://gohugo.io/taxonomies/usage/">Using Taxonomies</a></q> 参照)。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>