ゼロから始める Hugo | Baldanders.info
tag:Baldanders.info,2019-02-19:/hugo
2019-02-19T22:54:05+09:00
内容が古くなって最新情報に追従できなくなったので本家サイトに移転しました。
https://baldanders.info/images/avatar.jpg
https://baldanders.info/images/avatar.jpg
JSON 形式で Feed を出力する — ゼロから始める Hugo
tag:Baldanders.info,2019-02-19:/hugo/feed-with-json-format/
2019-02-19T22:54:05+09:00
2019-02-19T13:54:05+00:00
Hugo では JSON 形式のファイルも出力できる。
Spiegel
/profile/
<p>今回も小ネタ。</p>
<p>サイトの feed は RSS や Atom といった XML 形式を使うのが普通だが,他サイトの連携を考えるなら JSON 形式で出力できれば色々と便利そうである。
<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では JSON 形式のファイルも出力できる。</p>
<h2 id="json-形式のファイルを出力するよう設定する">JSON 形式のファイルを出力するよう設定する。</h2>
<p>まずは JSON 形式のファイルを出力できるよう設定ファイル(<code>config.toml</code> など)に以下の記述を追加する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">"HTML"</span><span class="p">,</span> <span class="s2">"RSS"</span><span class="p">,</span> <span class="s2">"JSON"</span><span class="p">]</span>
</span></span></code></pre></div><p>これでサイトのルートディレクトリに <code>index.html</code>, <code>index.xml</code>, そして <code>index.json</code> ファイルを出力できるようになった。</p>
<h2 id="json-ファイルのテンプレートを作成する">JSON ファイルのテンプレートを作成する</h2>
<p>テンプレートファイルを格納する <code>layouts/</code> フォルダの直下または <code>layouts/_default/</code> フォルダに <code>index.json</code> または <code>home.json</code> ファイルを作成する。
中身は例えばこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{
</span></span><span class="line"><span class="cl"> "title": {{ .Site.Title | jsonify }},
</span></span><span class="line"><span class="cl"> "url": {{ .Permalink | jsonify }},{{ with .OutputFormats.Get "RSS" }}
</span></span><span class="line"><span class="cl"> "feed": {{ .Permalink | jsonify }},{{ end }}
</span></span><span class="line"><span class="cl"> "entry": [{{ range $i, $v := first 3 .Data.Pages }}{{ if ne $i 0 }},{{ end }}{{ with $v }}
</span></span><span class="line"><span class="cl"> {
</span></span><span class="line"><span class="cl"> "title": {{ .Title | jsonify }},{{ with .Section }}
</span></span><span class="line"><span class="cl"> "section": {{ . | jsonify }},{{ end }}{{ with .Description }}
</span></span><span class="line"><span class="cl"> "description": {{ . | jsonify }},{{ end }}
</span></span><span class="line"><span class="cl"> "url": {{ .Permalink | jsonify }},
</span></span><span class="line"><span class="cl"> "published": {{ .Date.UTC.Format "2006-01-02T15:04:05-07:00" | jsonify }},
</span></span><span class="line"><span class="cl"> "update": {{ .Lastmod.UTC.Format "2006-01-02T15:04:05-07:00" | jsonify }}
</span></span><span class="line"><span class="cl"> }{{ end }}{{ end }}
</span></span><span class="line"><span class="cl"> ]
</span></span><span class="line"><span class="cl">}
</span></span></code></pre></div><p>これでコンパイルを行うと以下のような内容で <code>index.json</code> ファイルが出力される。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"text.Baldanders.info"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"url"</span><span class="p">:</span> <span class="s2">"https://text.baldanders.info/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"feed"</span><span class="p">:</span> <span class="s2">"https://text.baldanders.info/index.xml"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"entry"</span><span class="p">:</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="nt">"title"</span><span class="p">:</span> <span class="s2">"“Article 13” に関するブックマーク"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"section"</span><span class="p">:</span> <span class="s2">"remark"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"description"</span><span class="p">:</span> <span class="s2">"英語不得手の私としては難儀していたが,ようやく日本語の記事を見かけるようになった。"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"url"</span><span class="p">:</span> <span class="s2">"https://text.baldanders.info/remark/2019/02/bookmarks-for-article-13/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"published"</span><span class="p">:</span> <span class="s2">"2019-02-19T13:04:51+00:00"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"update"</span><span class="p">:</span> <span class="s2">"2019-02-19T13:05:49+00:00"</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></span><span class="line"><span class="cl"> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"2019-02-17 のブックマーク"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"section"</span><span class="p">:</span> <span class="s2">"bookmarks"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"description"</span><span class="p">:</span> <span class="s2">"「火星ローバー「オポチュニティ」ミッション終了、15年の活動に幕」他"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"url"</span><span class="p">:</span> <span class="s2">"https://text.baldanders.info/bookmarks/2019/02/17-bookmarks/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"published"</span><span class="p">:</span> <span class="s2">"2019-02-17T12:25:23+00:00"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"update"</span><span class="p">:</span> <span class="s2">"2019-02-17T12:25:48+00:00"</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></span><span class="line"><span class="cl"> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"Hugo で Git 情報を取得する"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"section"</span><span class="p">:</span> <span class="s2">"hugo"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"description"</span><span class="p">:</span> <span class="s2">"Hugo の環境を git で管理している場合はコミット情報等をテンプレートに組み込むことができる。"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"author"</span><span class="p">:</span> <span class="s2">"Spiegel"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"license"</span><span class="p">:</span> <span class="s2">"https://creativecommons.org/licenses/by-sa/4.0/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"url"</span><span class="p">:</span> <span class="s2">"https://text.baldanders.info/hugo/gitinfo/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"published"</span><span class="p">:</span> <span class="s2">"2019-02-16T13:15:35+00:00"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"update"</span><span class="p">:</span> <span class="s2">"2019-02-16T13:20:26+00:00"</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></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では出力ファイルについてかなり細かく制御することが出来るが,今回はこのくらいにしておこう(笑) そのうち詳しい記事を書くこともあるかも知れない。</p>
<h2 id="ブックマーク">ブックマーク</h2>
<ul>
<li><a href="https://gohugo.io/templates/output-formats/">Custom Output Formats | Hugo</a></li>
<li><a href="https://github.com/hugojapan/hugoDocs">GitHub - hugojapan/hugoDocs: Hugo 日本語ドキュメント</a></li>
</ul>
Hugo で Git 情報を取得する — ゼロから始める Hugo
tag:Baldanders.info,2019-02-16:/hugo/gitinfo/
2019-02-16T22:15:35+09:00
2019-02-16T13:15:35+00:00
Hugo の環境を git で管理している場合はコミット情報等をテンプレートに組み込むことができる。
Spiegel
/profile/
<p><a href="https://baldanders.info/" title="Baldanders.info">本家サイト</a>を改装するにあたって <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> の環境を見直している。
この作業でやったことをこのセクションで少しずつ紹介していこうと思う。</p>
<p>今回は <a href="https://git-scm.com/">git</a> との連携の話。</p>
<h2 id="gitinfo">.GitInfo</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> の環境を <a href="https://git-scm.com/">git</a> で管理している場合は以下のコミット情報等をテンプレートに組み込むことができる。</p>
<table>
<thead>
<tr>
<th>テンプレート変数</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.GitInfo.AuthorName</code></td>
<td>ユーザ名</td>
</tr>
<tr>
<td><code>.GitInfo.AuthorEmail</code></td>
<td>ユーザのメールアドレス</td>
</tr>
<tr>
<td><code>.GitInfo.AuthorDate</code></td>
<td>コミット時刻</td>
</tr>
<tr>
<td><code>.GitInfo.Hash</code></td>
<td>リビジョン値</td>
</tr>
<tr>
<td><code>.GitInfo.AbbreviatedHash</code></td>
<td>リビジョン値(短縮値)</td>
</tr>
<tr>
<td><code>.GitInfo.Subject</code></td>
<td>コミット・メッセージ</td>
</tr>
</tbody>
</table>
<p><code>.GitInfo</code> を有効にするには <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> コマンド起動時に <code>--enableGitInfo</code> オプションを付加するか設定ファイル(<code>config.toml</code> など)に</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">enableGitInfo</span> <span class="p">=</span> <span class="kc">true</span>
</span></span></code></pre></div><p>と設定すればよい。</p>
<h2 id="ページ更新時刻-lastmod-をコミット時刻にする">ページ更新時刻 .Lastmod をコミット時刻にする</h2>
<p><code>.GitInfo</code> が有効であればページの更新時刻を示すテンプレート変数 <code>.Lastmod</code> の値がコミット時刻になる。</p>
<p>テンプレート変数 <code>.Lastmod</code> は,既定ではページの front matter 内の以下の変数にマッピングされている。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">frontmatter</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lastmod</span> <span class="p">=</span> <span class="p">[</span><span class="s2">":git"</span><span class="p">,</span> <span class="s2">"lastmod"</span><span class="p">,</span> <span class="s2">"date"</span><span class="p">,</span> <span class="s2">"publishDate"</span><span class="p">]</span>
</span></span></code></pre></div><p>配列の順番がそのまま優先順位になっている。
つまり <code>":git"</code> がコミット時刻 <code>.GitInfo.AuthorDate</code> に対応する。</p>
<p>この設定は設定ファイルで変更可能なので,たとえば <code>.GitInfo</code> を有効にしたいがコミット時刻を更新時刻に使いたくない場合は</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">frontmatter</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lastmod</span> <span class="p">=</span> <span class="p">[</span><span class="s2">"lastmod"</span><span class="p">,</span> <span class="s2">"date"</span><span class="p">,</span> <span class="s2">"publishDate"</span><span class="p">]</span>
</span></span></code></pre></div><p>などとしてしまってもよい。</p>
<p>ちなみに入力ファイルのタイムスタンプを更新時刻にする場合は</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">frontmatter</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lastmod</span> <span class="p">=</span> <span class="p">[</span><span class="s2">":fileModTime"</span><span class="p">]</span>
</span></span></code></pre></div><p>などとする。
まぁ今どきファイルのタイムスタンプを更新時刻にするのはオススメではないが。</p>
Hugo におけるサイト内相互参照 — ゼロから始める Hugo
tag:Baldanders.info,2018-08-18:/hugo/cross-references-with-shortcodes/
2018-08-18T14:46:11+09:00
2018-08-18T05:46:11+00:00
Hugo 0.45 から ref/relref の仕様が変わったので紹介する。
Spiegel
/profile/
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> ではサイト内の相互参照(リンク)を表現するために組み込み <a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes | Hugo">shortcode</a> である <code>ref</code> や <code>relref</code> を使うのだが <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 0.45 から <code>ref</code>/<code>relref</code> の仕様が変わったので紹介する。</p>
<p>例えば参照したい記事を <code>content/blog/entry.md</code> とする。
他の記事からこの記事を参照したい場合, <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 0.45 より前のバージョンでは</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< ref "blog/entry.md" >}}
</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">{{< relref "blog/entry.md" >}}
</span></span></code></pre></div><p>のように作業環境の <code>content</code> フォルダ以下の相対パスを指定すればよかった。
これにより <code>ref</code> コマンドなら <code>http(s)://site.name/blog/entry/</code> に, <code>relref</code> コマンドなら <code>/blog/entry/</code> に展開されていた。</p>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 0.45 からは ビルド後のディレクトリ構成で考える。
たとえば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< ref "/blog/entry.md" >}}
</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">{{< relref "entry.md" >}}
</span></span></code></pre></div><p>といった感じ(サイトのルート・ディレクトリからの絶対パスを指定する場合 <code>blog/...</code> ではなく <code>/blog/...</code> となる点に注目)。
したがって <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 0.45 より前の古い表記では warning が発生するので注意が必要である。
また <code>relref</code> コマンドを使う際に絶対パスを指定した場合も warning になる。</p>
<p>なお,このルールはテンプレートにも適用される。
たとえば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{ with .Site.GetPage "/blog/entry.md" }}{{ .Title }}{{ end }}
</span></span></code></pre></div><p>などとすれば任意の記事の情報を取得できる。</p>
<h2 id="ブックマーク">ブックマーク</h2>
<ul>
<li><a href="https://gohugo.io/news/0.45-relnotes/">Hugo 0.45: Revival of ref, relref and GetPage | Hugo</a></li>
<li><a href="https://gohugo.io/content-management/cross-references/">Links and Cross References | Hugo</a></li>
</ul>
Chroma Syntax Highlighting — ゼロから始める Hugo
tag:Baldanders.info,2017-09-25:/hugo/chroma-syntax-highlighting/
2017-09-25T22:57:09+09:00
2017-09-25T13:57:09+00:00
今回のアップデートの目玉は純正 Golang 製の Chroma を組み込んで Syntax Highlight に対応したことだろう。
Spiegel
/profile/
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 0.28 がリリースされた。</p>
<ul>
<li><a href="https://gohugo.io/news/0.28-relnotes/">Hugo | Hugo 0.28: High-speed Syntax Highlighting!</a></li>
</ul>
<p>今回のアップデートの目玉は <a href="https://golang.org/" title="The Go Programming Language">Golang</a> 製の <a href="https://github.com/alecthomas/chroma" title="alecthomas/chroma: A general purpose syntax highlighter in pure Go">Chroma</a> を組み込んで Syntax Highlight に対応したことだろう。
それまでは <a href="http://pygments.org/">Pygments</a> のようなツールを使うか <a href="https://highlightjs.org/">highlight.js</a> のようなスクリプトを噛ませるかだったのだが,ようやく <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> が自前で用意できるようになった<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。</p>
<p>Syntax Highlight の設定方法については<a href="https://gohugo.io/documentation/" title="Hugo | Hugo Documentation">マニュアル</a>の以下のページが参考になる。</p>
<ul>
<li><a href="https://gohugo.io/content-management/syntax-highlighting/">Hugo | Syntax Highlighting</a></li>
</ul>
<h2 id="syntax-highlight-を有効にする">Syntax Highlight を有効にする</h2>
<p><a href="https://github.com/alecthomas/chroma" title="alecthomas/chroma: A general purpose syntax highlighter in pure Go">Chroma</a> Syntax Highlight を有効にするには設定ファイル(<code>config.toml</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="na">pygmentsUseClasses</span> <span class="o">=</span> <span class="s">true</span></span></span></code></pre></div>
<p>さらにハイライト表示の CSS ファイルを用意する。
これは <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">$ hugo gen chromastyles --style=tango > chroma-styles.css
</span></span></code></pre></div><p>指定できる <code>style</code> の詳細は以下が参考になる。</p>
<ul>
<li><a href="https://help.farbox.com/pygments.html">Pygments style gallery!</a></li>
</ul>
<p>もちろん,生成した CSS ファイルは HTML の <code><head></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">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/css/chroma-styles.css"</span><span class="p">></span>
</span></span></code></pre></div><h2 id="ハイライト表示">ハイライト表示</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> でハイライトを指定するには以下の <a href="https://gohugo.io/content-management/shortcodes/" title="Hugo | Shortcodes">shortcode</a> を使う。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< highlight go >}}
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() {
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world!")
</span></span><span class="line"><span class="cl">}
</span></span><span class="line"><span class="cl">{{< /highlight >}}
</span></span></code></pre></div><p>実際の表示は以下の通り。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></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">{{< highlight go "linenos=inline,linenostart=1" >}}
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() {
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world!")
</span></span><span class="line"><span class="cl">}
</span></span><span class="line"><span class="cl">{{< /highlight >}}
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="ln">1</span><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="ln">2</span><span class="cl">
</span></span><span class="line"><span class="ln">3</span><span class="cl"><span class="kn">import</span> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="ln">4</span><span class="cl">
</span></span><span class="line"><span class="ln">5</span><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="ln">6</span><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
</span></span><span class="line"><span class="ln">7</span><span class="cl"><span class="p">}</span></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">{{< highlight go "linenos=inline,linenostart=1,hl_lines=5-7" >}}
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() {
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world!")
</span></span><span class="line"><span class="cl">}
</span></span><span class="line"><span class="cl">{{< /highlight >}}
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="ln">1</span><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="ln">2</span><span class="cl">
</span></span><span class="line"><span class="ln">3</span><span class="cl"><span class="kn">import</span> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="ln">4</span><span class="cl">
</span></span><span class="line hl"><span class="ln">5</span><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line hl"><span class="ln">6</span><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
</span></span><span class="line hl"><span class="ln">7</span><span class="cl"><span class="p">}</span></span></span></code></pre></div>
<p>一方,設定ファイルで <code>pygmentsCodeFences</code> を有効にすることで GitHub Flavored Markdown の Syntax Highlight も使えるようになる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">```go
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() {
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world!")
</span></span><span class="line"><span class="cl">}
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><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>
</ol>
</div>
Shortcodes で HTML コードを埋め込む — ゼロから始める Hugo
tag:Baldanders.info,2015-10-24:/hugo/shortcodes/
2015-10-24T16:36:04+09:00
2015-10-24T07:36:04+00:00
たとえば記事の中に YouTube の動画や SlideShare の HTML コードを埋め込みたいとする。こういうときは Shortcodes の機能を使うと便利だ。
Spiegel
/profile/
<p>今回は <a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> の話。</p>
<p>たとえば記事の中に <a href="https://www.youtube.com/" title="YouTube">YouTube</a> の動画や <a href="http://www.slideshare.net/" title="Share and Discover Knowledge on LinkedIn SlideShare">SlideShare</a> の HTML コードを埋め込みたいとする。
<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では段落単位に HTML コードを記述するとそのまま出力してくれるけど,頻繁に使うコードはテンプレート化して再利用したいだろう。
こういうときは <a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> の機能を使うと便利だ。</p>
<h2 id="shortcodes-の使い方">Shortcodes の使い方</h2>
<p><a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> は partial template の一種だけど,テンプレートの中に埋め込むのではなく,記事(markdown)ファイルに埋め込むことができる。</p>
<h3 id="指定した範囲を加工する">指定した範囲を加工する</h3>
<p>書式は以下のとおりである。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< shortcodename >}} ... {{< /shortcodename >}}
</span></span></code></pre></div><p><a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> の実体は <code>layouts/shortcodes</code> フォルダに <code>shortcodename.hml</code> などとコード名をそのままファイル名にしてで配置する。
たとえば <code>layouts/shortcodes/fig-quote.html</code> というファイルを作成し,以下のコードを書く。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{ with .Get "lang" }}<span class="p"><</span><span class="nt">figure</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">figure</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">blockquote</span><span class="p">></span>{{ .Inner }}<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ if .Get "title"}}<span class="p"><</span><span class="nt">figcaption</span><span class="p">></span>via <span class="p"><</span><span class="nt">q</span><span class="p">></span>{{ with .Get "link"}}<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{.}}"</span><span class="p">></span>{{ end }}{{ .Get "title" }}{{ with .Get "link"}}<span class="p"></</span><span class="nt">a</span><span class="p">></span>{{ end }}<span class="p"></</span><span class="nt">q</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</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">{{< fig-quote title="Compatible Licenses - Creative Commons" link="https://creativecommons.org/compatiblelicenses" lang="en" >}}
</span></span><span class="line"><span class="cl"><q>The <a href="https://www.gnu.org/copyleft/gpl.html">GNU General Public License version 3 </a> was declared a <q>BY-SA–Compatible License</q> for version 4.0 on 8 October 2015.
</span></span><span class="line"><span class="cl">Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
</span></span><span class="line"><span class="cl">Other <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3" target="_blank">special considerations</a> apply.
</span></span><span class="line"><span class="cl">See the full <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3">analysis</a> and <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL">comparison</a> for more information.</q>
</span></span><span class="line"><span class="cl">{{< /fig-quote >}}
</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">figure</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">blockquote</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">q</span><span class="p">></span>The <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.gnu.org/copyleft/gpl.html"</span><span class="p">></span>GNU General Public License version 3 <span class="p"></</span><span class="nt">a</span><span class="p">></span> was declared a <span class="p"><</span><span class="nt">q</span><span class="p">></span>BY-SA–Compatible License<span class="p"></</span><span class="nt">q</span><span class="p">></span> for version 4.0 on 8 October 2015.
</span></span><span class="line"><span class="cl">Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
</span></span><span class="line"><span class="cl">Other <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_blank"</span><span class="p">></span>special considerations<span class="p"></</span><span class="nt">a</span><span class="p">></span> apply.
</span></span><span class="line"><span class="cl">See the full <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3"</span><span class="p">></span>analysis<span class="p"></</span><span class="nt">a</span><span class="p">></span> and <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL"</span><span class="p">></span>comparison<span class="p"></</span><span class="nt">a</span><span class="p">></span> for more information.<span class="p"></</span><span class="nt">q</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figcaption</span><span class="p">></span>via <span class="p"><</span><span class="nt">q</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://creativecommons.org/compatiblelicenses"</span><span class="p">></span>Compatible Licenses - Creative Commons<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">q</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</span></span></code></pre></div><figure lang="en">
<blockquote>
<q>The <a href="https://www.gnu.org/copyleft/gpl.html">GNU General Public License version 3 </a> was declared a <q>BY-SA–Compatible License</q> for version 4.0 on 8 October 2015.
Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
Other <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3">special considerations</a> apply.
See the full <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3">analysis</a> and <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL">comparison</a> for more information.</q>
</blockquote>
<figcaption><div>via <q><a href="https://creativecommons.org/compatiblelicenses">Compatible Licenses - Creative Commons</a></q></div></figcaption>
</figure>
<p><code>{{< fig-quote >}} ... {{< /fig-quote >}}</code> で囲まれている部分が <code>.Inner</code> 変数に格納され展開されているのがお分かりだろうか。</p>
<p><a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> では <code>.Inner</code> 変数以外に任意のパラメータを持たせることができる。
上の例で言うなら <code>lang</code>, <code>title</code>, <code>link</code> が <code>{{< fig-quote >}}</code> に対するパラメータである。</p>
<p>名前を持たないパラメータでも有効である。
ここではルビ(ruby)を振る <a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> <code>layouts/shortcodes/ruby.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">ruby</span><span class="p">><</span><span class="nt">rb</span><span class="p">></span>{{ .Inner }}<span class="p"></</span><span class="nt">rb</span><span class="p">><</span><span class="nt">rp</span><span class="p">></span> (<span class="p"></</span><span class="nt">rp</span><span class="p">><</span><span class="nt">rt</span><span class="p">></span>{{ index .Params 0 }}<span class="p"></</span><span class="nt">rt</span><span class="p">><</span><span class="nt">rp</span><span class="p">></span>) <span class="p"></</span><span class="nt">rp</span><span class="p">></</span><span class="nt">ruby</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">ruby</span> <span class="err">"ひらがな"</span> <span class="p">></span>}}平仮名{{<span class="p"><</span> <span class="p">/</span><span class="nt">ruby</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">ruby</span><span class="p">><</span><span class="nt">rb</span><span class="p">></span>平仮名<span class="p"></</span><span class="nt">rb</span><span class="p">><</span><span class="nt">rp</span><span class="p">></span> (<span class="p"></</span><span class="nt">rp</span><span class="p">><</span><span class="nt">rt</span><span class="p">></span>ひらがな<span class="p"></</span><span class="nt">rt</span><span class="p">><</span><span class="nt">rp</span><span class="p">></span>) <span class="p"></</span><span class="nt">rp</span><span class="p">></</span><span class="nt">ruby</span><span class="p">></span> と記述すれば
</span></span></code></pre></div><blockquote>
<p>これで例えば <ruby><rb>平仮名</rb><rp> (</rp><rt>ひらがな</rt><rp>) </rp></ruby> と記述すれば</p>
</blockquote>
<p>と展開される。
パラメータの順番に意味ができるので,多数のパラメータが必要な場合には向かないかもしれない。</p>
<h3 id="指定した範囲を-markdown-ドキュメントとして処理する">指定した範囲を Markdown ドキュメントとして処理する</h3>
<p><code>.Inner</code> 変数の内容を <code>markdownify</code> 関数に渡すことで Markdown ドキュメントとして処理する事ができる。
先程の <code>layouts/shortcodes/fig-quote.html</code> を少し改造した <code>layouts/shortcodes/fig-quote-md.html</code> を作ってみよう。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{ with .Get "lang" }}<span class="p"><</span><span class="nt">figure</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">figure</span><span class="p">></span>{{ end }}
</span></span><span class="line hl"><span class="cl"><span class="p"><</span><span class="nt">blockquote</span><span class="p">></span>{{ .Inner | markdownify }}<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ if .Get "title"}}<span class="p"><</span><span class="nt">figcaption</span><span class="p">></span>via <span class="p"><</span><span class="nt">q</span><span class="p">></span>{{ with .Get "link"}}<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{.}}"</span><span class="p">></span>{{ end }}{{ .Get "title" }}{{ with .Get "link"}}<span class="p"></</span><span class="nt">a</span><span class="p">></span>{{ end }}<span class="p"></</span><span class="nt">q</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span></span></span></code></pre></div>
<p>これを使って以下の Markdown 記述を処理してみる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< fig-quote-md title="Compatible Licenses - Creative Commons" link="https://creativecommons.org/compatiblelicenses" lang="en" >}}
</span></span><span class="line"><span class="cl">The [GNU General Public License version 3](https://www.gnu.org/copyleft/gpl.html) was declared a “BY-SA–Compatible License” for version 4.0 on 8 October 2015.
</span></span><span class="line"><span class="cl">Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
</span></span><span class="line"><span class="cl">Other [special considerations](https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3) apply.
</span></span><span class="line"><span class="cl">See the full [analysis](https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3) and [comparison](https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL) for more information.
</span></span><span class="line"><span class="cl">{{< /fig-quote-md >}}
</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">figure</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">blockquote</span><span class="p">></span>The <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.gnu.org/copyleft/gpl.html"</span><span class="p">></span>GNU General Public License version 3<span class="p"></</span><span class="nt">a</span><span class="p">></span> was declared a “BY-SA–Compatible License” for version 4.0 on 8 October 2015.
</span></span><span class="line"><span class="cl">Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
</span></span><span class="line"><span class="cl">Other <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3"</span><span class="p">></span>special considerations<span class="p"></</span><span class="nt">a</span><span class="p">></span> apply.
</span></span><span class="line"><span class="cl">See the full <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3"</span><span class="p">></span>analysis<span class="p"></</span><span class="nt">a</span><span class="p">></span> and <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL"</span><span class="p">></span>comparison<span class="p"></</span><span class="nt">a</span><span class="p">></span> for more information.<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figcaption</span><span class="p">></span>via <span class="p"><</span><span class="nt">q</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://creativecommons.org/compatiblelicenses"</span><span class="p">></span>Compatible Licenses - Creative Commons<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">q</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</span></span></code></pre></div><figure lang="en">
<blockquote>The <a href="https://www.gnu.org/copyleft/gpl.html">GNU General Public License version 3</a> was declared a “BY-SA–Compatible License” for version 4.0 on 8 October 2015.
Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
Other <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3">special considerations</a> apply.
See the full <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3">analysis</a> and <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL">comparison</a> for more information.</blockquote>
<figcaption><div>via <q><a href="https://creativecommons.org/compatiblelicenses">Compatible Licenses - Creative Commons</a></q></div></figcaption>
</figure>
<h3 id="shortcodes-を入れ子にする"><a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> を入れ子にする</h3>
<p>もうひとつ,以下の内容の <code>layouts/shortcodes/quote.html</code> ファイルを作ってみよう。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{ with .Get "lang" }}<span class="p"><</span><span class="nt">q</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">q</span><span class="p">></span>{{ end }}{{ .Inner }}<span class="p"></</span><span class="nt">q</span><span class="p">></span>
</span></span></code></pre></div><p>これは <code>.Inner</code> 変数の内容を <code><q></code> 要素で囲むだけの簡単なコードだが,先程の <code>fig-quote-md</code> と組み合わせて</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< fig-quote-md title="Compatible Licenses - Creative Commons" link="https://creativecommons.org/compatiblelicenses" lang="en" >}}
</span></span><span class="line"><span class="cl">{{< quote >}}The [GNU General Public License version 3](https://www.gnu.org/copyleft/gpl.html) was declared a “BY-SA–Compatible License” for version 4.0 on 8 October 2015.
</span></span><span class="line"><span class="cl">Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
</span></span><span class="line"><span class="cl">Other [special considerations](https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3) apply.
</span></span><span class="line"><span class="cl">See the full [analysis](https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3) and [comparison](https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL) for more information.{{< /quote >}}
</span></span><span class="line"><span class="cl">{{< /fig-quote-md >}}
</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">figure</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">blockquote</span><span class="p">><</span><span class="nt">q</span><span class="p">></span>The <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.gnu.org/copyleft/gpl.html"</span><span class="p">></span>GNU General Public License version 3<span class="p"></</span><span class="nt">a</span><span class="p">></span> was declared a “BY-SA–Compatible License” for version 4.0 on 8 October 2015.
</span></span><span class="line"><span class="cl">Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
</span></span><span class="line"><span class="cl">Other <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3"</span><span class="p">></span>special considerations<span class="p"></</span><span class="nt">a</span><span class="p">></span> apply.
</span></span><span class="line"><span class="cl">See the full <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3"</span><span class="p">></span>analysis<span class="p"></</span><span class="nt">a</span><span class="p">></span> and <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL"</span><span class="p">></span>comparison<span class="p"></</span><span class="nt">a</span><span class="p">></span> for more information.<span class="p"></</span><span class="nt">q</span><span class="p">></</span><span class="nt">blockquote</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figcaption</span><span class="p">></span>via <span class="p"><</span><span class="nt">q</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://creativecommons.org/compatiblelicenses"</span><span class="p">></span>Compatible Licenses - Creative Commons<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">q</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</span></span></code></pre></div><figure lang="en">
<blockquote><q>The <a href="https://www.gnu.org/copyleft/gpl.html">GNU General Public License version 3</a> was declared a “BY-SA–Compatible License” for version 4.0 on 8 October 2015.
Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
Other <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3">special considerations</a> apply.
See the full <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3">analysis</a> and <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL">comparison</a> for more information.</q></blockquote>
<figcaption><div>via <q><a href="https://creativecommons.org/compatiblelicenses">Compatible Licenses - Creative Commons</a></q></div></figcaption>
</figure>
<h3 id="shortcodes-のみで-html-展開する場合"><a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> のみで HTML 展開する場合</h3>
<p><code>{{< shortcodename >}}</code> のみ,または <code>{{< shortcodename />}}</code> で表記すると <code>{{ .Inner }}</code> を持たない <a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> を表現できる。
たとえば <code>layouts/shortcodes/fig-youtube.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">figure</span> <span class="na">style</span><span class="o">=</span><span class="s">'margin:0 auto;text-align:center;'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; margin: 0 2rem; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">iframe</span> <span class="na">class</span><span class="o">=</span><span class="s">"youtube-player"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; top: 0; left: 0; width: 100%; height: 100%;"</span> <span class="na">allowfullscreen</span> <span class="na">frameborder</span><span class="o">=</span><span class="s">"0"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.youtube-nocookie.com/embed/{{ .Get "</span><span class="na">id</span><span class="err">"</span> <span class="err">}}"</span> <span class="na">allowfullscreen</span><span class="p">></</span><span class="nt">iframe</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>{{ if .Get "title"}}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figcaption</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.youtube.com/watch?v={{ .Get "</span><span class="na">id</span><span class="err">"</span> <span class="err">}}"</span><span class="p">></span>{{ .Get "title" }}<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ end }}<span class="p"></</span><span class="nt">figure</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">fig-youtube</span> <span class="na">id</span><span class="o">=</span><span class="s">"Kjqff5bkUrE"</span> <span class="na">title</span><span class="o">=</span><span class="s">"「はやぶさ2」地球スイングバイ解説CG / Hayabusa2's Earth Swing-by CG - YouTube"</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">figure</span> <span class="na">style</span><span class="o">=</span><span class="s">'margin:0 auto;text-align:center;'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; margin: 0 2rem; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">iframe</span> <span class="na">class</span><span class="o">=</span><span class="s">"youtube-player"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; top: 0; left: 0; width: 100%; height: 100%;"</span> <span class="na">allowfullscreen</span> <span class="na">frameborder</span><span class="o">=</span><span class="s">"0"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.youtube-nocookie.com/embed/Kjqff5bkUrE"</span> <span class="na">allowfullscreen</span><span class="p">></</span><span class="nt">iframe</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">figcaption</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.youtube.com/watch?v=Kjqff5bkUrE"</span><span class="p">></span>「はやぶさ2」地球スイングバイ解説CG / Hayabusa2<span class="ni">&#39;</span>s Earth Swing-by CG - YouTube<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</span></span></code></pre></div><figure style='margin:0 auto;text-align:center;'>
<div style="position: relative; margin: 0 2rem; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
<iframe class="youtube-player" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen frameborder="0" src="https://www.youtube-nocookie.com/embed/Kjqff5bkUrE" allowfullscreen></iframe>
</div>
<figcaption><div><a href="https://www.youtube.com/watch?v=Kjqff5bkUrE">「はやぶさ2」地球スイングバイ解説CG / Hayabusa2's Earth Swing-by CG - YouTube</a></div></figcaption>
</figure>
<h2 id="組み込みの-shortcodes">組み込みの Shortcodes</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> にはあらかじめ組み込まれた <a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> が幾つかある。
この中で一番よく使うのは記事間の相互リンクを張ることのできる <code>ref</code> および <code>relref</code> だろう。</p>
<p>たとえばこの記事の「ブックマーク」節にリンクを張る場合は</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">[<span class="nt">このページのブックマーク</span>](<span class="na">{{< relref "#bookmark" >}}</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">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#bookmark"</span><span class="p">></span>このページのブックマーク<span class="p"></</span><span class="nt">a</span><span class="p">></span>
</span></span></code></pre></div><p>のように展開される。
ちなみに <code>ref</code> は絶対パス, <code>relref</code> は相対パスに展開される。</p>
<p>相互リンクは <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-markdown" data-lang="markdown"><span class="line"><span class="cl">[<span class="nt">「ブックマーク」ページの「公式サイト」節</span>](<span class="na">{{< ref "/hugo/bookmark.md#official" >}}</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">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://text.baldanders.info/hugo/bookmark/#official:9bacfa348e5fe42acc9342a16675997d"</span><span class="p">></span>「ブックマーク」ページの「公式サイト」節<span class="p"></</span><span class="nt">a</span><span class="p">></span>
</span></span></code></pre></div><p>のように展開される。</p>
<h2 id="bookmark">ブックマーク</h2>
<ul>
<li>
<p><a href="http://wdkk.co.jp/lab/hugo/">Hugoサイト構築 | Watanabe-DENKI Inc. 渡辺電気株式会社</a> : お勧め!</p>
</li>
<li>
<p><a href="https://baldanders.info/hugo/cross-references-with-shortcodes/">Hugo におけるサイト内相互参照</a></p>
</li>
</ul>
<p><a href="https://baldanders.info/hugo/bookmark/">Hugo に関するブックマークはこちら</a>。</p>
Categories や Tags の一覧ページを作る — ゼロから始める Hugo
tag:Baldanders.info,2015-10-04:/hugo/categories-and-tags-list/
2015-10-04T20:21:54+09: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>
Template の部品化 — ゼロから始める Hugo
tag:Baldanders.info,2015-09-25:/hugo/partial-template/
2015-09-25T11:14:44+09:00
2015-09-25T02:14:44+00:00
今回は Template について,もう少しだけ詳しく紹介してみる。
Spiegel
/profile/
<p>今回は Template について,もう少しだけ詳しく紹介してみる。</p>
<h2 id="theme-hugo-theme-text-を導入する">Theme “hugo-theme-text” を導入する</h2>
<p><a href="https://baldanders.info/hugo/theme/" title="Theme を利用する">前回</a>予告した通り,拙作の Theme <a href="https://github.com/spiegel-im-spiegel/hugo-theme-text">spiegel-im-spiegel/hugo-theme-text</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>git clone https://github.com/spiegel-im-spiegel/hugo-theme-text.git themes/hugo-theme-text
</span></span><span class="line"><span class="cl">Cloning into 'themes/hugo-theme-text'...
</span></span><span class="line"><span class="cl">remote: Counting objects: 174, done.
</span></span><span class="line"><span class="cl">remote: Compressing objects: 100% (133/133), done.
</span></span><span class="line"><span class="cl">Receiving objecemote: Total 174 (delta 82), reused 123 (delta 35), pack-reused 0
</span></span><span class="line"><span class="cl">Receiving objects: 49%
</span></span><span class="line"><span class="cl">Receiving objects: 100% (174/174), 25.34 KiB | 0 bytes/s, done.
</span></span><span class="line"><span class="cl">Resolving deltas: 100% (82/82), done.
</span></span><span class="line"><span class="cl">Checking connectivity... done.
</span></span></code></pre></div><p>作業環境が git 管理下にある場合は submodule として導入するとよい。</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>git submodule add https://github.com/spiegel-im-spiegel/hugo-theme-text.git themes/hugo-theme-text
</span></span><span class="line"><span class="cl">Cloning into 'themes/hugo-theme-text'...
</span></span><span class="line"><span class="cl">remote: Counting objects: 282, done.
</span></span><span class="line"><span class="cl">remote: Compressing objects: 100% (11/11), done.
</span></span><span class="line"><span class="cl">rRemote: Total 282 (delta 4), reused 0 (delta 0), pack-reused 271eceiving object
</span></span><span class="line"><span class="cl">Receiving objects: 100% (282/282), 37.54 KiB | 0 bytes/s, done.
</span></span><span class="line"><span class="cl">Resolving deltas: 100% (141/141), done.
</span></span><span class="line"><span class="cl">Checking connectivity... done.
</span></span></code></pre></div><p>では,例によっていきなりビルド。
の前に,作業環境の <code>layouts</code> フォルダを空っぽにする。</p>
<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 --theme="hugo-theme-text"
</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 21 ms
</span></span></code></pre></div><p>これでこんな感じの <code>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">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1"</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">name</span><span class="o">=</span><span class="s">"generator"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Hugo 0.15-DEV"</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">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"//fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic|Open+Sans:400,400italic,700,700italic|Inconsolata:400,700&subset=latin,latin-ext"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"//cdnjs.cloudflare.com/ajax/libs/cc-icons/1.2.1/css/cc-icons.min.css"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/css/main.css"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/css/text-baldanders.css"</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">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"alternate"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/index.xml"</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/rss+xml"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Hello World!"</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">title</span><span class="p">></span>Hello World!<span class="p"></</span><span class="nt">title</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">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></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="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'container'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">header</span> <span class="na">role</span><span class="o">=</span><span class="s">"banner"</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><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/"</span><span class="p">></span>Hello World!<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">'/index.xml'</span> <span class="na">title</span><span class="o">=</span><span class="s">'Feed'</span><span class="p">><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">'fas fa-rss'</span><span class="p">></</span><span class="nt">i</span><span class="p">></</span><span class="nt">a</span><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">header</span><span class="p">></span>
</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="p"><</span><span class="nt">main</span> <span class="na">role</span><span class="o">=</span><span class="s">"main"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">article</span> <span class="na">itemscope</span> <span class="na">itemtype</span><span class="o">=</span><span class="s">'http://schema.org/Blog'</span> <span class="na">itemref</span><span class="o">=</span><span class="s">'maker'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h2</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">'name'</span><span class="p">></span>All Entries<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="na">style</span><span class="o">=</span><span class="s">"list-style:none;"</span><span class="p">><</span><span class="nt">li</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">'blogPost'</span> <span class="na">itemscope</span> <span class="na">itemtype</span><span class="o">=</span><span class="s">'http://schema.org/BlogPosting'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> [<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">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/practice/hello/"</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">'url'</span><span class="p">><</span><span class="nt">strong</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">'name'</span><span class="p">></span>Hello!<span class="p"></</span><span class="nt">strong</span><span class="p">></</span><span class="nt">a</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">style</span><span class="o">=</span><span class="s">"font-size:smaller;"</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></span><span class="line"><span class="cl"> #<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></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">span</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></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">article</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">main</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">footer</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">nav</span> <span class="na">role</span><span class="o">=</span><span class="s">"navigation"</span><span class="p">></span>
</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 center'</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>Powered by <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 0.15-DEV<span class="p"></</span><span class="nt">a</span><span class="p">></span> and <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://github.com/spiegel-im-spiegel/hugo-theme-text"</span><span class="p">></span>Text<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></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">footer</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></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>この <code>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">{{ partial "top.html" . }}
</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">{{ partial "header.html" . }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>{{ .Site.Title }}<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ with .Site.Params.description }}<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"{{ . }}"</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">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ partial "prepare.html" . }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'container'</span><span class="p">></span><span class="c"><!-- Container Area --></span>
</span></span><span class="line"><span class="cl">{{ partial "banner.html" . }}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">main</span> <span class="na">role</span><span class="o">=</span><span class="s">"main"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">article</span> <span class="na">itemscope</span> <span class="na">itemtype</span><span class="o">=</span><span class="s">'http://schema.org/Blog'</span> <span class="na">itemref</span><span class="o">=</span><span class="s">'maker'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h2</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">'name'</span><span class="p">></span>All Entries<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="na">style</span><span class="o">=</span><span class="s">"list-style:none;"</span><span class="p">></span>{{ range .Site.Pages }}{{ partial "li.html" . }}{{ end }}<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">article</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">main</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{ partial "footer.html" . }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span><span class="c"><!-- Container Area --></span>
</span></span><span class="line"><span class="cl">{{ partial "cleanup.html" . }}
</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">{{ partial "end.html" . }}
</span></span></code></pre></div><p>この中で <code>{{ partial "top.html" . }}</code> となっている部分が partial template を呼び出している部分で,テンプレートの中にテンプレートを入れ子にすることができる。</p>
<h3 id="partial-template">Partial Template</h3>
<p>Partial template を格納する場所は決まっている。
では, <a href="https://github.com/spiegel-im-spiegel/hugo-theme-text">spiegel-im-spiegel/hugo-theme-text</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>tree /f themes\hugo-theme-text
</span></span><span class="line"><span class="cl">C:\HUGO-ENV\WWW\THEMES\HUGO-THEME-TEXT
</span></span><span class="line"><span class="cl">│ LICENSE
</span></span><span class="line"><span class="cl">│ README.md
</span></span><span class="line"><span class="cl">│ theme.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">│ default.md
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─images
</span></span><span class="line"><span class="cl">│ screenshot.png
</span></span><span class="line"><span class="cl">│ tn.png
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─layouts
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ rss.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─partials
</span></span><span class="line"><span class="cl">│ │ banner.html
</span></span><span class="line"><span class="cl">│ │ cc-license.html
</span></span><span class="line"><span class="cl">│ │ ccl-rss.html
</span></span><span class="line"><span class="cl">│ │ cleanup.html
</span></span><span class="line"><span class="cl">│ │ end.html
</span></span><span class="line"><span class="cl">│ │ feedback.html
</span></span><span class="line"><span class="cl">│ │ footer.html
</span></span><span class="line"><span class="cl">│ │ header-include.html
</span></span><span class="line"><span class="cl">│ │ header.html
</span></span><span class="line"><span class="cl">│ │ li.html
</span></span><span class="line"><span class="cl">│ │ navi.html
</span></span><span class="line"><span class="cl">│ │ prepare.html
</span></span><span class="line"><span class="cl">│ │ social.html
</span></span><span class="line"><span class="cl">│ │ top.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">└─static
</span></span><span class="line"><span class="cl"> ├─css
</span></span><span class="line"><span class="cl"> │ main.css
</span></span><span class="line"><span class="cl"> │ text-baldanders.css
</span></span><span class="line"><span class="cl"> │
</span></span><span class="line"><span class="cl"> └─images
</span></span><span class="line"><span class="cl"> avatar.png
</span></span></code></pre></div><p><code>layouts/partials</code> フォルダに多くのファイルが格納されているのがお分かりだろうか。
これが partial template である。</p>
<p>たとえば <code>layouts/partials/top.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></code></pre></div><p>また <code>layouts/partials/header.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">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">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ .Hugo.Generator }}
</span></span><span class="line"><span class="cl">{{ with .Site.Params.favicon }}<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"icon"</span> <span class="na">type</span><span class="o">=</span><span class="s">"image/x-icon"</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"//fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic|Open+Sans:400,400italic,700,700italic|Inconsolata:400,700&subset=latin,latin-ext"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"//cdnjs.cloudflare.com/ajax/libs/cc-icons/1.2.1/css/cc-icons.min.css"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/css/main.css"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/css/text-baldanders.css"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ partial "header-include.html" . }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"alternate"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/index.xml"</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/rss+xml"</span> <span class="na">title</span><span class="o">=</span><span class="s">"{{ .Site.Title }}"</span><span class="p">></span>
</span></span></code></pre></div><p>となっていて,内部でさらに <code>layouts/partials/header-include.html</code> を呼び出している。
実は <code>layouts/partials/header-include.html</code> の中身は空である。
ユーザの作業環境側に <code>layouts/partials/header-include.html</code> ファイルを設置すればそちらが優先して読み込まれるため,これでユーザ側がカスタマイズできるようになっている。</p>
<h3 id="おまけ-author-情報">【おまけ】 Author 情報</h3>
<p><a href="https://github.com/spiegel-im-spiegel/hugo-theme-text">spiegel-im-spiegel/hugo-theme-text</a> では <code>config.toml</code> に以下の author 情報を入れるとページに反映される。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">author</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">"Spiegel"</span>
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">"https://baldanders.info/profile/"</span>
</span></span><span class="line"><span class="cl"><span class="nx">avatar</span> <span class="p">=</span> <span class="s2">"/images/avatar.jpg"</span>
</span></span><span class="line"><span class="cl"><span class="nx">license</span> <span class="p">=</span> <span class="s2">"by-sa"</span>
</span></span><span class="line"><span class="cl"><span class="nx">github</span> <span class="p">=</span> <span class="s2">"spiegel-im-spiegel"</span>
</span></span><span class="line"><span class="cl"><span class="nx">twitter</span> <span class="p">=</span> <span class="s2">"spiegel_2007"</span>
</span></span><span class="line"><span class="cl"><span class="nx">medium</span> <span class="p">=</span> <span class="s2">"@spiegel"</span>
</span></span><span class="line"><span class="cl"><span class="nx">instagram</span> <span class="p">=</span> <span class="s2">"spiegel_2007"</span>
</span></span><span class="line"><span class="cl"><span class="nx">facebook</span> <span class="p">=</span> <span class="s2">"spiegel.im.spiegel"</span>
</span></span><span class="line"><span class="cl"><span class="nx">linkedin</span> <span class="p">=</span> <span class="s2">"spiegelimspiegel"</span>
</span></span><span class="line"><span class="cl"><span class="nx">flattr</span> <span class="p">=</span> <span class="s2">""</span>
</span></span></code></pre></div><figure style='margin:0 auto;text-align:center;'><a href="https://photo.baldanders.info/flickr/21504929379/"><img src="https://photo.baldanders.info/flickr/image/21504929379_m.png" srcset="https://photo.baldanders.info/flickr/image/21504929379_m.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Top Page of &#34;hugo-theme-text&#34; theme" loading="lazy"></a><figcaption><div><a href="https://photo.baldanders.info/flickr/21504929379/">Top Page of &#34;hugo-theme-text&#34; theme</a></div></figcaption>
</figure>
<p>記事ページでは front matter に <code>[author]</code> 項目を加える事で front matter の値が優先して表示される。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">date</span> <span class="p">=</span> <span class="s2">"2015-09-05T16:40:41+09:00"</span>
</span></span><span class="line"><span class="cl"><span class="nx">draft</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">"Hello!"</span>
</span></span><span class="line"><span class="cl"><span class="nx">categories</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">"hugo"</span> <span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">tags</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">"hello"</span><span class="p">,</span> <span class="s2">"world"</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="nx">author</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">avatar</span> <span class="p">=</span> <span class="s2">"/images/avatar.jpg"</span>
</span></span><span class="line"><span class="cl"> <span class="nx">facebook</span> <span class="p">=</span> <span class="s2">"spiegel.im.spiegel"</span>
</span></span><span class="line"><span class="cl"> <span class="nx">flattr</span> <span class="p">=</span> <span class="s2">""</span>
</span></span><span class="line"><span class="cl"> <span class="nx">github</span> <span class="p">=</span> <span class="s2">"spiegel-im-spiegel"</span>
</span></span><span class="line"><span class="cl"> <span class="nx">instagram</span> <span class="p">=</span> <span class="s2">"spiegel_2007"</span>
</span></span><span class="line"><span class="cl"> <span class="nx">license</span> <span class="p">=</span> <span class="s2">"by-sa"</span>
</span></span><span class="line"><span class="cl"> <span class="nx">linkedin</span> <span class="p">=</span> <span class="s2">"spiegelimspiegel"</span>
</span></span><span class="line"><span class="cl"> <span class="nx">medium</span> <span class="p">=</span> <span class="s2">"@spiegel"</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">"Spiegel"</span>
</span></span><span class="line"><span class="cl"> <span class="nx">twitter</span> <span class="p">=</span> <span class="s2">"spiegel_2007"</span>
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">"https://baldanders.info/profile/"</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span>
</span></span></code></pre></div><figure style='margin:0 auto;text-align:center;'><a href="https://photo.baldanders.info/flickr/21069070064/"><img src="https://photo.baldanders.info/flickr/image/21069070064_m.png" srcset="https://photo.baldanders.info/flickr/image/21069070064_m.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Entry Page of &#34;hugo-theme-text&#34; theme" loading="lazy"></a><figcaption><div><a href="https://photo.baldanders.info/flickr/21069070064/">Entry Page of &#34;hugo-theme-text&#34; theme</a></div></figcaption>
</figure>
<p>他にも favicon や Disqus などを設置可能。
詳しくは <a href="https://github.com/spiegel-im-spiegel/hugo-theme-text#simple-text-hugo-theme"><code>README.md</code></a> を参照のこと。</p>
<h2 id="bookmark">ブックマーク</h2>
<ul>
<li><a href="http://wdkk.co.jp/lab/hugo/">Hugoサイト構築 | Watanabe-DENKI Inc. 渡辺電気株式会社</a> : お勧め!</li>
</ul>
<p><a href="https://baldanders.info/hugo/bookmark/">Hugo に関するブックマークはこちら</a>。</p>
Theme を利用する — ゼロから始める Hugo
tag:Baldanders.info,2015-09-11:/hugo/theme/
2015-09-11T17:59:18+09:00
2015-09-11T08:59:18+00:00
前々回,前回とちょっと飛ばしすぎたので今回は軽めに theme の話題を。
Spiegel
/profile/
<p><a href="https://baldanders.info/hugo/hello/" title="インストールから Hello World まで">前々回</a>,<a href="https://baldanders.info/hugo/section/" title="Categories, Tags そして Section">前回</a>とちょっと飛ばしすぎたので今回は軽めに theme の話題を。</p>
<h2 id="overview">Hugo の Theme</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> には theme 機能がある。
Theme 機能の利点はもちろん画面の構成等を共有できる点にある。
また複数人で作業している場合は theme として構成を管理することで作業環境を統一できる利点もある。</p>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> の repository には既に多くの theme が寄せられている。</p>
<ul>
<li><a href="https://github.com/gohugoio/hugoThemes">gohugoio/hugoThemes</a></li>
</ul>
<p>また repository に登録されているもの以外にも色々なテーマが公開されているようである。</p>
<h2 id="install">Theme をインストールして利用する</h2>
<p>Theme を利用するには作業環境上に repository を <code>git clone</code> する。</p>
<pre tabindex="0"><code>C:\hugo-env\www>git clone --recursive https://github.com/gohugoio/hugoThemes.git themes
</code></pre><p>この repository ではユーザが公開している theme を git の submodule として結合しているため, <code>--recursive</code> オプションを付けて clone する。
現時点(2015年9月)で56個の theme が登録されているようである。</p>
<p>また単独の theme をインストールする場合は,作業環境に <code>themes</code> フォルダを作り,その下に theme の repository を clone する</p>
<pre tabindex="0"><code>C:\hugo-env\www>git clone https://github.com/spiegel-im-spiegel/hugo-theme-text.git themes/hugo-theme-text
Cloning into 'themes/hugo-theme-text'...
remote: Counting objects: 174, done.
remote: Compressing objects: 100% (133/133), done.
Receiving objecemote: Total 174 (delta 82), reused 123 (delta 35), pack-reused 0
Receiving objects: 49%
Receiving objects: 100% (174/174), 25.34 KiB | 0 bytes/s, done.
Resolving deltas: 100% (82/82), done.
Checking connectivity... done.
</code></pre><p>Theme を使ってビルドする場合には <code>-t</code> または <code>--theme</code> オプションを使って theme 名を指定する。
Theme 名は <code>themes</code> フォルダ直下のフォルダ名である。</p>
<pre tabindex="0"><code>C:\hugo-env\www>hugo --theme="html5"
0 draft content
0 future content
1 pages created
0 paginator pages created
2 tags created
1 categories created
in 72 ms
</code></pre><p>また <code>config.toml</code> に theme 名を記述する方法もある(ただしコマンドライン・オプションのほうが優先される)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml:config.toml" data-lang="toml:config.toml"><span class="line"><span class="cl"><span class="nx">baseurl</span> <span class="p">=</span> <span class="s2">"http://hello.example.com/"</span>
</span></span><span class="line"><span class="cl"><span class="nx">languageCode</span> <span class="p">=</span> <span class="s2">"ja"</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">"Hello World!"</span>
</span></span><span class="line"><span class="cl"><span class="nx">theme</span> <span class="p">=</span> <span class="s2">"html5"</span>
</span></span></code></pre></div><h2 id="make">Theme を作成する</h2>
<p>もちろん Theme は自身で作成することもできる。
作成するには <code>hugo new theme</code> コマンドを使う。</p>
<pre tabindex="0"><code>C:\hugo-env\www>hugo new theme sample-theme
C:\hugo-env\www>tree /f .
C:\HUGO-ENV\WWW
│ .editorconfig
│ .gitignore
│ config.toml
│ README.md
│
├─archetypes
├─content
│ └─practice
│ hello.md
│
├─data
├─layouts
│ │ 404.html
│ │ index.html
│ │
│ ├─practice
│ │ single.html
│ │
│ ├─section
│ │ practice.html
│ │
│ └─_default
│ list.html
│ single.html
│
├─public
│ │ 404.html
│ │ index.html
│ │ index.xml
│ │ sitemap.xml
│ │
│ ├─categories
│ │ └─hugo
│ │ index.html
│ │ index.xml
│ │
│ ├─css
│ │ reset.css
│ │ text.css
│ │
│ ├─practice
│ │ │ index.html
│ │ │ index.xml
│ │ │
│ │ └─hello
│ │ index.html
│ │
│ └─tags
│ ├─hello
│ │ index.html
│ │ index.xml
│ │
│ └─world
│ index.html
│ index.xml
│
├─static
└─themes
└─sample-theme
│ LICENSE.md
│ theme.toml
│
├─archetypes
│ default.md
│
├─layouts
│ │ index.html
│ │
│ ├─partials
│ │ footer.html
│ │ header.html
│ │
│ └─_default
│ list.html
│ single.html
│
└─static
├─css
└─js
C:\hugo-env\www>hugo --theme="sample-theme"
0 draft content
0 future content
1 pages created
0 paginator pages created
2 tags created
1 categories created
in 37 ms
</code></pre><p>いくつかファイルが作成されているが <code>LICENSE.md</code> と <code>theme.toml</code> 以外は空のファイルである。</p>
<p><code>LICENSE.md</code> はライセンスファイルで MIT ライセンスの雛形が出力されている。
そのまま使うのであればライセンス発行者の名前を記述する。
他のライセンスを使うのであれば他のファイルに差し替えるなり削除するなりすればよい。</p>
<p><code>theme.toml</code> には theme の情報を記述する。
初期値は以下のようになっている。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml:themes/sample-theme/theme.toml" data-lang="toml:themes/sample-theme/theme.toml"><span class="line"><span class="cl"><span class="c"># theme.toml template for a Hugo theme</span>
</span></span><span class="line"><span class="cl"><span class="c"># See https://github.com/gohugoio/hugoThemes#themetoml for an example</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">"Sample Theme"</span>
</span></span><span class="line"><span class="cl"><span class="nx">license</span> <span class="p">=</span> <span class="s2">"MIT"</span>
</span></span><span class="line"><span class="cl"><span class="nx">licenselink</span> <span class="p">=</span> <span class="s2">"https://github.com/yourname/yourtheme/blob/master/LICENSE.md"</span>
</span></span><span class="line"><span class="cl"><span class="nx">description</span> <span class="p">=</span> <span class="s2">""</span>
</span></span><span class="line"><span class="cl"><span class="nx">homepage</span> <span class="p">=</span> <span class="s2">"http://siteforthistheme.com/"</span>
</span></span><span class="line"><span class="cl"><span class="nx">tags</span> <span class="p">=</span> <span class="p">[</span><span class="s2">""</span><span class="p">,</span> <span class="s2">""</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">features</span> <span class="p">=</span> <span class="p">[</span><span class="s2">""</span><span class="p">,</span> <span class="s2">""</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">min_version</span> <span class="p">=</span> <span class="mf">0.14</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">author</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">""</span>
</span></span><span class="line"><span class="cl"> <span class="nx">homepage</span> <span class="p">=</span> <span class="s2">""</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># If porting an existing theme</span>
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">original</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">""</span>
</span></span><span class="line"><span class="cl"> <span class="nx">homepage</span> <span class="p">=</span> <span class="s2">""</span>
</span></span><span class="line"><span class="cl"> <span class="nx">repo</span> <span class="p">=</span> <span class="s2">""</span>
</span></span></code></pre></div><p>これに必要な項目を書き込めばいい。</p>
<h2 id="customaize">Theme をカスタマイズする</h2>
<p><a href="https://baldanders.info/hugo/hello/" title="インストールから Hello World まで">前々回</a>を読んだ方はピンと来ると思うが, theme のフォルダ構成(<code>archetypes</code>, <code>layouts</code>, <code>static</code>)は作業環境のそれとほぼ同じである。
実は theme の構成は作業環境で上書きできる。
従って theme を自サイト用にカスタマイズするのであれば, <code>themes</code> フォルダ内は触らないようにして,作業環境側で上書きするのがスマートである。</p>
<h2 id="mytheme">拙作 Theme “hugo-theme-text”</h2>
<p>今回,このサイトを構築するにあたり,シンプルなテキスト・サイト用の theme を作成・公開した。</p>
<ul>
<li><a href="https://github.com/spiegel-im-spiegel/hugo-theme-text">spiegel-im-spiegel/hugo-theme-text</a></li>
</ul>
<p>次回からはこの theme をベースに説明をしていきたいと思う。</p>
<h2 id="bookmark">ブックマーク</h2>
<ul>
<li><a href="http://wdkk.co.jp/lab/hugo/">Hugoサイト構築 | Watanabe-DENKI Inc. 渡辺電気株式会社</a> : お勧め!</li>
</ul>
<p><a href="https://baldanders.info/hugo/bookmark/">Hugo に関するブックマークはこちら</a>。</p>
Categories, Tags そして Section — ゼロから始める Hugo
tag:Baldanders.info,2015-09-11:/hugo/section/
2015-09-11T17:58:32+09: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>
インストールから Hello World まで — ゼロから始める Hugo
tag:Baldanders.info,2015-09-11:/hugo/hello/
2015-09-11T17:58:23+09:00
2015-09-11T08:58:23+00:00
自サイトのブログ機能を Hugo で外出しにする作業を行うにあたって,いろいろ試しながら作業している。ここではその時のメモを公開する。
Spiegel
/profile/
<p>(初出: <a href="http://qiita.com/spiegel-im-spiegel/items/eac7bf2a3c0fc19afcbf">ゼロから始める Hugo — インストールから Hello World まで - Qiita</a>)</p>
<p><a href="https://baldanders.info/blog/000870/">私の本家サイトのブログ機能を外出しにする作業</a>を行うにあたり,ツールとしては <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> を使うことにしたのだが,初めて使うツールなので,いろいろ試しながら作業している。
ここではその時のメモを公開する。</p>
<h2 id="install">Hugo のインストール</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> の実行モジュールは公式サイトから取得できるのだが Go 言語環境のある方は是非 <code>go get</code> から取得することをお勧めする。
<a href="https://github.com/spf13/hugo">Hugo の repository</a> はサイトのドキュメントのビルド環境も同梱されているため色々と参考になる。</p>
<p>なお <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では非常に多くのパッケージを利用していて,取得の際には git の他に Mercurial が必要である(参照: 「<a href="http://qiita.com/spiegel-im-spiegel/items/a52a47942fd3946bb583">はじめての Go 言語 (on Windows) その3</a>」)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\workspace>mkdir hugo
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\workspace>cd hugo
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\workspace\hugo>SET GOPATH=C:\workspace\hugo
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\workspace\hugo>go get -v github.com/spf13/hugo
</span></span><span class="line"><span class="cl">github.com/spf13/hugo (download)
</span></span><span class="line"><span class="cl">github.com/kardianos/osext (download)
</span></span><span class="line"><span class="cl">github.com/spf13/afero (download)
</span></span><span class="line"><span class="cl">github.com/spf13/cast (download)
</span></span><span class="line"><span class="cl">github.com/spf13/jwalterweatherman (download)
</span></span><span class="line"><span class="cl">github.com/spf13/cobra (download)
</span></span><span class="line"><span class="cl">github.com/cpuguy83/go-md2man (download)
</span></span><span class="line"><span class="cl">github.com/russross/blackfriday (download)
</span></span><span class="line"><span class="cl">github.com/shurcooL/sanitized_anchor_name (download)
</span></span><span class="line"><span class="cl">github.com/inconshreveable/mousetrap (download)
</span></span><span class="line"><span class="cl">github.com/spf13/pflag (download)
</span></span><span class="line"><span class="cl">github.com/spf13/fsync (download)
</span></span><span class="line"><span class="cl">github.com/PuerkitoBio/purell (download)
</span></span><span class="line"><span class="cl">github.com/opennota/urlesc (download)
</span></span><span class="line"><span class="cl">github.com/miekg/mmark (download)
</span></span><span class="line"><span class="cl">github.com/BurntSushi/toml (download)
</span></span><span class="line"><span class="cl">Fetching https://gopkg.in/yaml.v2?go-get=1
</span></span><span class="line"><span class="cl">Parsing meta tags from https://gopkg.in/yaml.v2?go-get=1 (status code 200)
</span></span><span class="line"><span class="cl">get "gopkg.in/yaml.v2": found meta tag main.metaImport{Prefix:"gopkg.in/yaml.v2", VCS:"git", RepoRoot:"https://gopkg.in/yaml.v2"} at https://gopkg.in/yaml.v2?go-get=1
</span></span><span class="line"><span class="cl">gopkg.in/yaml.v2 (download)
</span></span><span class="line"><span class="cl">github.com/spf13/viper (download)
</span></span><span class="line"><span class="cl">github.com/kr/pretty (download)
</span></span><span class="line"><span class="cl">github.com/kr/text (download)
</span></span><span class="line"><span class="cl">github.com/magiconair/properties (download)
</span></span><span class="line"><span class="cl">github.com/mitchellh/mapstructure (download)
</span></span><span class="line"><span class="cl">Fetching https://golang.org/x/text/transform?go-get=1
</span></span><span class="line"><span class="cl">Parsing meta tags from https://golang.org/x/text/transform?go-get=1 (status code 200)
</span></span><span class="line"><span class="cl">get "golang.org/x/text/transform": found meta tag main.metaImport{Prefix:"golang.org/x/text", VCS:"git", RepoRoot:"https://go.googlesource.com/text"} at https://golang.org/x/text/transform?go-get=1
</span></span><span class="line"><span class="cl">get "golang.org/x/text/transform": verifying non-authoritative meta tag
</span></span><span class="line"><span class="cl">Fetching https://golang.org/x/text?go-get=1
</span></span><span class="line"><span class="cl">Parsing meta tags from https://golang.org/x/text?go-get=1 (status code 200)
</span></span><span class="line"><span class="cl">golang.org/x/text (download)
</span></span><span class="line"><span class="cl">Fetching https://golang.org/x/text/unicode/norm?go-get=1
</span></span><span class="line"><span class="cl">Parsing meta tags from https://golang.org/x/text/unicode/norm?go-get=1 (status code 200)
</span></span><span class="line"><span class="cl">get "golang.org/x/text/unicode/norm": found meta tag main.metaImport{Prefix:"golang.org/x/text", VCS:"git", RepoRoot:"https://go.googlesource.com/text"} at https://golang.org/x/text/unicode/norm?go-get=1
</span></span><span class="line"><span class="cl">get "golang.org/x/text/unicode/norm": verifying non-authoritative meta tag
</span></span><span class="line"><span class="cl">bitbucket.org/pkg/inflect (download)
</span></span><span class="line"><span class="cl">github.com/dchest/cssmin (download)
</span></span><span class="line"><span class="cl">github.com/eknkc/amber (download)
</span></span><span class="line"><span class="cl">github.com/yosssi/ace (download)
</span></span><span class="line"><span class="cl">github.com/spf13/nitro (download)
</span></span><span class="line"><span class="cl">github.com/gorilla/websocket (download)
</span></span><span class="line"><span class="cl">Fetching https://gopkg.in/fsnotify.v1?go-get=1
</span></span><span class="line"><span class="cl">Parsing meta tags from https://gopkg.in/fsnotify.v1?go-get=1 (status code 200)
</span></span><span class="line"><span class="cl">get "gopkg.in/fsnotify.v1": found meta tag main.metaImport{Prefix:"gopkg.in/fsnotify.v1", VCS:"git", RepoRoot:"https://gopkg.in/fsnotify.v1"} at https://gopkg.in/fsnotify.v1?go-get=1
</span></span><span class="line"><span class="cl">gopkg.in/fsnotify.v1 (download)
</span></span><span class="line"><span class="cl">github.com/shurcooL/sanitized_anchor_name
</span></span><span class="line"><span class="cl">github.com/spf13/afero
</span></span><span class="line"><span class="cl">github.com/inconshreveable/mousetrap
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/bufferpool
</span></span><span class="line"><span class="cl">github.com/kr/text
</span></span><span class="line"><span class="cl">github.com/kardianos/osext
</span></span><span class="line"><span class="cl">github.com/spf13/jwalterweatherman
</span></span><span class="line"><span class="cl">github.com/spf13/pflag
</span></span><span class="line"><span class="cl">github.com/russross/blackfriday
</span></span><span class="line"><span class="cl">github.com/opennota/urlesc
</span></span><span class="line"><span class="cl">github.com/BurntSushi/toml
</span></span><span class="line"><span class="cl">github.com/PuerkitoBio/purell
</span></span><span class="line"><span class="cl">gopkg.in/yaml.v2
</span></span><span class="line"><span class="cl">github.com/spf13/cast
</span></span><span class="line"><span class="cl">github.com/kr/pretty
</span></span><span class="line"><span class="cl">github.com/magiconair/properties
</span></span><span class="line"><span class="cl">github.com/spf13/fsync
</span></span><span class="line"><span class="cl">github.com/cpuguy83/go-md2man/md2man
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/hugofs
</span></span><span class="line"><span class="cl">github.com/mitchellh/mapstructure
</span></span><span class="line"><span class="cl">golang.org/x/text/transform
</span></span><span class="line"><span class="cl">bitbucket.org/pkg/inflect
</span></span><span class="line"><span class="cl">github.com/dchest/cssmin
</span></span><span class="line"><span class="cl">github.com/miekg/mmark
</span></span><span class="line"><span class="cl">github.com/eknkc/amber/parser
</span></span><span class="line"><span class="cl">github.com/spf13/cobra
</span></span><span class="line"><span class="cl">github.com/yosssi/ace
</span></span><span class="line"><span class="cl">golang.org/x/text/unicode/norm
</span></span><span class="line"><span class="cl">github.com/spf13/nitro
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/parser
</span></span><span class="line"><span class="cl">github.com/spf13/viper
</span></span><span class="line"><span class="cl">github.com/eknkc/amber
</span></span><span class="line"><span class="cl">github.com/gorilla/websocket
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/utils
</span></span><span class="line"><span class="cl">gopkg.in/fsnotify.v1
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/transform
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/watcher
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/livereload
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/helpers
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/source
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/target
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/tpl
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/hugolib
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/create
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/commands
</span></span><span class="line"><span class="cl">github.com/spf13/hugo
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\workspace\hugo>bin\hugo.exe version
</span></span><span class="line"><span class="cl">Hugo Static Site Generator v0.15-DEV BuildDate: 2015-09-05T13:45:44+09:00
</span></span></code></pre></div><p>作成した実行モジュールは,作成された場所に <code>PATH</code> を通すか, <code>PATH</code> の通った場所にコピーすればよい。</p>
<h2 id="env">作業環境の作成</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 用の作業環境を作るには <code>hugo new site</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 new site C:\hugo-env\www
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:>cd C:\hugo-env\www
</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">├─data
</span></span><span class="line"><span class="cl">├─layouts
</span></span><span class="line"><span class="cl">└─static
</span></span></code></pre></div><p>ここで <code>config.toml</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="na">baseurl</span> <span class="o">=</span> <span class="s">"http://replace-this-with-your-hugo-site.com/"</span>
</span></span><span class="line"><span class="cl"><span class="na">languageCode</span> <span class="o">=</span> <span class="s">"en-us"</span>
</span></span><span class="line"><span class="cl"><span class="na">title</span> <span class="o">=</span> <span class="s">"My New Hugo Site"</span>
</span></span></code></pre></div><p>なお, TOML 形式のファイルの読み書きは以下が参考になる。</p>
<ul>
<li><a href="http://qiita.com/b4b4r07/items/77c327742fc2256d6cbe">設定ファイル記述言語 TOML - Qiita</a></li>
</ul>
<p>この中で必須なのは baseurl のみで,これがないとビルドエラーになる(ただし <code>--baseUrl</code> オプションを付ければ回避できる)。
今回は <code>config.toml</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="na">baseurl</span> <span class="o">=</span> <span class="s">"http://hello.example.com/"</span>
</span></span><span class="line"><span class="cl"><span class="na">languageCode</span> <span class="o">=</span> <span class="s">"ja"</span>
</span></span><span class="line"><span class="cl"><span class="na">title</span> <span class="o">=</span> <span class="s">"Hello World!"</span>
</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">0 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">0 categories created
</span></span><span class="line"><span class="cl">0 tags created
</span></span><span class="line"><span class="cl">in 7 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">├─data
</span></span><span class="line"><span class="cl">├─layouts
</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">└─static
</span></span></code></pre></div><p><code>public</code> フォルダとその下に4つのファイルが作成されている(ちなみに出力先は <code>-d</code> または <code>--destination</code> オプションで変更できる)。
現時点では <code>404.html</code> と <code>index.html</code> は空。</p>
<p><code>index.xml</code> は feed 用のファイルで RSS 2.0 形式で書かれている(何故か atom の語彙を使っている)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="utf-8" standalone="yes" ?></span>
</span></span><span class="line"><span class="cl"><span class="nt"><rss</span> <span class="na">version=</span><span class="s">"2.0"</span> <span class="na">xmlns:atom=</span><span class="s">"http://www.w3.org/2005/Atom"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><channel></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><title></span>Hello World!<span class="nt"></title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><link></span>http://hello.example.com/<span class="nt"></link></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><description></span>Recent content on Hello World!<span class="nt"></description></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><generator></span>Hugo -- gohugo.io<span class="nt"></generator></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><language></span>jp<span class="nt"></language></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><atom:link</span> <span class="na">href=</span><span class="s">"http://hello.example.com/index.xml"</span> <span class="na">rel=</span><span class="s">"self"</span> <span class="na">type=</span><span class="s">"application/rss+xml"</span> <span class="nt">/></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"></channel></span>
</span></span><span class="line"><span class="cl"><span class="nt"></rss></span>
</span></span></code></pre></div><p><code>sitemap.xml</code> は文字通りサイトマップ記述ファイル(SEO 用?)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="utf-8" standalone="yes" ?></span>
</span></span><span class="line"><span class="cl"><span class="nt"><urlset</span> <span class="na">xmlns=</span><span class="s">"http://www.sitemaps.org/schemas/sitemap/0.9"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"><url></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><loc></span>http://hello.example.com/<span class="nt"></loc></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><priority></span>0<span class="nt"></priority></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></url></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nt"></urlset></span>
</span></span></code></pre></div><h3 id="server-mode">サーバモード</h3>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では <code>hugo server</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>hugo server
</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">0 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">0 categories created
</span></span><span class="line"><span class="cl">0 tags created
</span></span><span class="line"><span class="cl">in 7 ms
</span></span><span class="line"><span class="cl">Serving pages from C:\hugo-env\www\public
</span></span><span class="line"><span class="cl">Web Server is available at http://127.0.0.1:1313/
</span></span><span class="line"><span class="cl">Press Ctrl+C to stop
</span></span></code></pre></div><p>この状態で <code>http://127.0.0.1:1313/</code> をブラウザで開けばいいのだが,現時点では <code>index.html</code> が空なので何も表示されない。
ちなみに,この状態の <code>index.xml</code> は</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="utf-8" standalone="yes" ?></span>
</span></span><span class="line"><span class="cl"><span class="nt"><rss</span> <span class="na">version=</span><span class="s">"2.0"</span> <span class="na">xmlns:atom=</span><span class="s">"http://www.w3.org/2005/Atom"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><channel></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><title></span>Hello World!<span class="nt"></title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><link></span>http://localhost:1313/<span class="nt"></link></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><description></span>Recent content on Hello World!<span class="nt"></description></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><generator></span>Hugo -- gohugo.io<span class="nt"></generator></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><language></span>jp<span class="nt"></language></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><atom:link</span> <span class="na">href=</span><span class="s">"http://localhost:1313/index.xml"</span> <span class="na">rel=</span><span class="s">"self"</span> <span class="na">type=</span><span class="s">"application/rss+xml"</span> <span class="nt">/></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"></channel></span>
</span></span><span class="line"><span class="cl"><span class="nt"></rss></span>
</span></span></code></pre></div><p>となっている。
URL が変更されていることにお気づきだろうか。
<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> は動作モードによって URL を自動的に書き換えてくれるのでデバッグが容易である。
ただしサーバモードの状態で本番環境に deploy しようとすると大変なことになるのでご注意を。
deploy する前には必ずビルドしよう(またはビルド結果の出力先を分ける)。</p>
<p>個人で作業する場合はこれで問題ないが,デバッグ用サーバを共有する場合には <code>http://localhost:1313/</code> では都合が悪いので <code>--bind</code> および <code>--port</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>hugo server --bind="hostname" --port=8080 --watch
</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">0 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">0 tags created
</span></span><span class="line"><span class="cl">0 categories created
</span></span><span class="line"><span class="cl">in 8 ms
</span></span><span class="line"><span class="cl">Watching for changes in C:\hugo-env\www/{data,content,layouts,static}
</span></span><span class="line"><span class="cl">Serving pages from C:\hugo-env\www\public
</span></span><span class="line"><span class="cl">Web Server is available at http://hostname:8080/
</span></span><span class="line"><span class="cl">Press Ctrl+C to stop
</span></span></code></pre></div><p>これで <code>http://hostname:8080/</code> でアクセスできるようになる。
ちなみに <code>--watch</code> オプションを付加すると,入力フォルダを監視して変更があればリコンパイルする。便利!</p>
<h2 id="template">はじめてのテンプレート</h2>
<p><code>index.html</code> を生成するにはテンプレートを用意する必要がある。
<code>index.html</code> のテンプレートは <code>layouts</code> フォルダに <code>index.html</code> というファイル名で配置する(安直!)</p>
<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">{{ 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 }}<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">p</span><span class="p">></span>Hello Hugo World!<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">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>{{ }}</code> で囲まれている部分が埋め込み構文だ。
たとえば <code>{{ .Title }}</code> にはタイトルが入る。
今回はトップページなので, <code>config.toml</code> で <code>title</code> に設定した文字列が入る。</p>
<p><code>{{ with .Site.LanguageCode }} ... {{ else }} ... {{ end }}</code> はいわゆる with 構文ってやつ<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。
これ便利だよね。ちなみに <code>with</code> で指定する変数が存在しない場合は <code>{{ else }}</code> 以降が走る。
似た書式で <code>{{ if .Site.LanguageCode }} ... {{ else }} ... {{ end }}</code> もあるが, <code>with</code> とは変数のスコープが異なるので注意(慣れるまでは結構ハマった)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{ if .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ .Site.LanguageCode }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</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 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 World!<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">p</span><span class="p">></span>Hello Hugo World!<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">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>config.toml</code> で <code>baseurl</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="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><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><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">></span>Hello Hugo World!<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">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>
<h3 id="404">404.html をどうしよう</h3>
<p><code>404.html</code> はページが存在しない場合(404)に代わりに表示するページである。
普通 404 では Web サーバで決められたページを表示するのだが, GitHub Pages のようにサイトのトップページにある <code>404.html</code> を表示してくれる場合もある。
なら <code>404.html</code> を空っぽにしておくわけにはいかないよねぇ。</p>
<p>固定の内容なら <code>static</code> フォルダ直下に <code>404.html</code> を置く手もある(<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では <code>static</code> フォルダ以下のファイルはそのままコピーされるが <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> のコントロール外となる)。
また, <code>layouts</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">{{ .Hugo.Generator }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>{{ .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>{{ with .Site.Params.error404 }}<span class="p"><</span><span class="nt">p</span><span class="p">></span>{{ . }}<span class="p"></</span><span class="nt">p</span><span class="p">></span>{{ end }}<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">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"generator"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Hugo 0.15-DEV"</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>404 Page not found<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 class="nt">p</span><span class="p">></span>あると思った? 残念! 404 でした。<span class="p"></</span><span class="nt">p</span><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="post">記事を書く</h2>
<p>さて,いよいよ記事を書いてみる。
<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では今どきの流行にのっとって Markdown 形式のファイルを入力ファイルにしている。
自前でファイルを用意してもよいが,新規に作成するなら <code>hugo new</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>hugo new hello.md
</span></span><span class="line"><span class="cl">C:\hugo-env\www\content\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">+++
</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 = true
</span></span><span class="line"><span class="cl">title = "hello"
</span></span><span class="line"><span class="cl">+++
</span></span></code></pre></div><p>などとなっている。</p>
<p><code>+++</code> で囲まれている部分は “front matter” と呼ばれている領域で,記事ごとの設定情報を格納する。
<code>+++</code> の場合は TOML, <code>---</code> の場合は YAML, <code>{ }</code> で挟んである場合は JSON として解釈されるようだ。</p>
<p>このファイルに記事を入力する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><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">+++
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">ようこそ, [Hugo](https://gohugo.io/) の世界へ!
</span></span></code></pre></div><p>草稿記事の場合は <code>draft</code> は <code>true</code> のままでよいが,そうでない場合は <code>false</code> にすること。
ちなみに <code>-D</code> または <code>--buildDrafts</code> オプションを付けてビルドすると草稿版も含めて出力される。
先ほどのサーバモードと組み合わせてデバッグに使うとよいだろう。</p>
<p>草稿(<code>draft</code>)状態の解除は手動でもいいのだが,<code>hugo undraft</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>hugo undraft content/hello.md
</span></span></code></pre></div><p>このコマンドを使うと <code>date</code> の値が現在時刻に更新されるので注意。</p>
<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">0 tags created
</span></span><span class="line"><span class="cl">0 categories created
</span></span><span class="line"><span class="cl">in 42 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">├─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">│ └─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">└─static
</span></span></code></pre></div><p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> の標準では <code>hello.md</code> は <code>hello/index.html</code> に展開される。
これを deploy すると Web ブラウザからは <code>http://hello.example.com/hello/</code> でアクセスできることになる。
この path の展開のさせ方はいろいろ設定できるようなのだが,今回は割愛する。</p>
<p>現時点では <code>hello/index.html</code> は空。
まぁテンプレートがないから当たり前なのだが。
記事用のテンプレートは <code>layouts</code> フォルダ以下に <code>_default</code> フォルダを作成し,さらにその下に <code>single.html</code> を配置する。</p>
<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">{{ 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">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><code>{{ .Title }}</code> には(今回は)記事のタイトルが入る。
<code>{{ .Content }}</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>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">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>となる。
Feed はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="utf-8" standalone="yes" ?></span>
</span></span><span class="line"><span class="cl"><span class="nt"><rss</span> <span class="na">version=</span><span class="s">"2.0"</span> <span class="na">xmlns:atom=</span><span class="s">"http://www.w3.org/2005/Atom"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><channel></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><title></span>Hello World!<span class="nt"></title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><link></span>http://hello.example.com/<span class="nt"></link></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><description></span>Recent content on Hello World!<span class="nt"></description></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><generator></span>Hugo -- gohugo.io<span class="nt"></generator></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><language></span>jp<span class="nt"></language></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><lastBuildDate></span>Sat, 05 Sep 2015 16:40:41 +0900<span class="nt"></lastBuildDate></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><atom:link</span> <span class="na">href=</span><span class="s">"http://hello.example.com/index.xml"</span> <span class="na">rel=</span><span class="s">"self"</span> <span class="na">type=</span><span class="s">"application/rss+xml"</span> <span class="nt">/></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"><item></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><title></span>Hello!<span class="nt"></title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><link></span>http://hello.example.com/hello/<span class="nt"></link></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><pubDate></span>Sat, 05 Sep 2015 16:40:41 +0900<span class="nt"></pubDate></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"><guid></span>http://hello.example.com/hello/<span class="nt"></guid></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><description></span><span class="ni">&lt;</span>p<span class="ni">&gt;</span>ようこそ, <span class="ni">&lt;</span>a href=<span class="ni">&#34;</span>https://gohugo.io/<span class="ni">&#34;&gt;</span>Hugo<span class="ni">&lt;</span>/a<span class="ni">&gt;</span> の世界へ!<span class="ni">&lt;</span>/p<span class="ni">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="nt"></description></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></item></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"></channel></span>
</span></span><span class="line"><span class="cl"><span class="nt"></rss></span>
</span></span></code></pre></div><p>ちなみに front matter をまるっと削除してビルドすると</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 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><span class="nt">h1</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 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><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="utf-8" standalone="yes" ?></span>
</span></span><span class="line"><span class="cl"><span class="nt"><rss</span> <span class="na">version=</span><span class="s">"2.0"</span> <span class="na">xmlns:atom=</span><span class="s">"http://www.w3.org/2005/Atom"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><channel></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><title></span>Hello World!<span class="nt"></title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><link></span>http://hello.example.com/<span class="nt"></link></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><description></span>Recent content on Hello World!<span class="nt"></description></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><generator></span>Hugo -- gohugo.io<span class="nt"></generator></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><language></span>jp<span class="nt"></language></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><atom:link</span> <span class="na">href=</span><span class="s">"http://hello.example.com/index.xml"</span> <span class="na">rel=</span><span class="s">"self"</span> <span class="na">type=</span><span class="s">"application/rss+xml"</span> <span class="nt">/></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"><item></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><title></title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><link></span>http://hello.example.com/hello/<span class="nt"></link></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><pubDate></span>Mon, 01 Jan 0001 00:00:00 +0000<span class="nt"></pubDate></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"><guid></span>http://hello.example.com/hello/<span class="nt"></guid></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><description></span><span class="ni">&lt;</span>p<span class="ni">&gt;</span>ようこそ, <span class="ni">&lt;</span>a href=<span class="ni">&#34;</span>https://gohugo.io/<span class="ni">&#34;&gt;</span>Hugo<span class="ni">&lt;</span>/a<span class="ni">&gt;</span> の世界へ!<span class="ni">&lt;</span>/p<span class="ni">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="nt"></description></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></item></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"></channel></span>
</span></span><span class="line"><span class="cl"><span class="nt"></rss></span>
</span></span></code></pre></div><p>のような感じになる。
タイトルや日付の情報が欠落するがエラーにはならないようだ。</p>
<h3 id="list">記事の一覧をつくる</h3>
<p>ついでなので <code>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">{{ 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 }}<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></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h2</span><span class="p">></span>What's New<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="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 first 15 .Site.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>これで最新の15記事を列挙できる。
で,ビルド結果はこんな感じ。</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 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 World!<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">h2</span><span class="p">></span>What's New<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="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>
<h2 id="html">【おまけ】 HTML ファイルをそのまま突っ込んだらどうなるの?</h2>
<p>というわけで,上で作成した <code>hello/index.html</code> を <code>hello2.html</code> として <code>content</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>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">0 tags created
</span></span><span class="line"><span class="cl">0 categories created
</span></span><span class="line"><span class="cl">in 16 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">│ hello2.html
</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">│ ├─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">│ └─hello2
</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">└─static
</span></span></code></pre></div><p>おおう。
<code>hello2/index.html</code> に変換されている。
ルートの <code>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>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 World!<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">h2</span><span class="p">></span>What's New<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="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">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/hello2/"</span><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>0001-01-01<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>おおう。
残念な結果に。
でもこれってもしかして front matter つけりゃいいのか。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">date = "2015-09-05T18:00:00+09:00"
</span></span><span class="line"><span class="cl">draft = false
</span></span><span class="line"><span class="cl">title = "Hello! Part 2"
</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="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! Part 2 -- 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! Part 2<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">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>
<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 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 World!<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">h2</span><span class="p">></span>What's New<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="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/hello2/"</span><span class="p">></span>Hello! Part 2<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">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>
<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! Part 2 -- 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! Part 2<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">div</span><span class="p">></span><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! Part 2 -- 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! Part 2<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">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><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>おおう orz なんてこったい。
つまり,元の HTML ファイルからヘッダ等の要素を抜いて front matter を付加すれば見た目も保持できて <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> からも Controllable な状態になるってことか?</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">date = "2015-09-05T18:00:00+09:00"
</span></span><span class="line"><span class="cl">draft = false
</span></span><span class="line"><span class="cl">title = "Hello! Part 2"
</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="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></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! Part 2 -- 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! Part 2<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">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>ふむむむむ。
これは古い資産を <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> に組み入れるのは結構骨かもなぁ。</p>
<h2 id="bookmark">ブックマーク</h2>
<ul>
<li><a href="http://wdkk.co.jp/lab/hugo/">Hugoサイト構築 | Watanabe-DENKI Inc. 渡辺電気株式会社</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="http://www.kanzaki.com/docs/html/lang.html">言語コードと国コード</a>」が参考になる。日本の場合は <code>jp</code> ではなく <code>ja</code>。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>