こんにちは、tamaoki (@t0shiya) です。
今回は、静的サイトジェネレータ Hugo のテンプレートの書き方について。
Hugo では、テンプレートの記述に Go 言語の html/template ライブラリを使用しています。 その文法や変数の扱い方等を簡単にご説明したいと思います。
基本文法
- テンプレートで変数や関数を使用するときは、中括弧（波括弧）２つで括ります。括弧内で改行してはいけません。
{{ }}
- 引数はスペースで区切ります
{{ printf "%#v" . }}
- 関数や変数は . を使用してアクセスします
.Params.bar
- コメントは /* */ で括ります。コメント内は改行しても構いません。
{{/*
コメント
*/}}
変数
変数は、前述のように .名前 という形式で記述します。
.Title
前回ご紹介したように Hugo ではページの種類によって使用できる変数が異なります。詳しくは こちら を参照してください。
変数は自分で定義して代入、参照することもできます。
{{ $address := "東京都千代田区"}}
{{ $address }}
関数
関数は、Go 言語の text/template で定義されているものと Hugo の独自関数が使用できます。
制御文
他の多くのテンプレートと同様に条件式やループが使用できます。
{{ if isset .Params "title" }}{{ .Params.title }}{{ end }}
isset は .Params に “title” という名前の要素が含まれているかどうかを返します。上の式は with を使って書き換えることもできます。
{{ with .Params.title }}{{ . }}{{ end }}
with を使用すると . に引数の値がセットされます。（ここでは .Params.title の値）
ループは次のように書きます。
{{ range array }}
現在の値は {{ . }} です。
{{ end }}
array には配列やマップ（連想配列）を指定します。range から end の間は . にループの次の値がセットされます。
パイプ
Go テンプレートではパイプライン文字 | を使って、値やコマンドの結果を次のコマンドへ渡すことができます。渡された値は最後の引数として扱われます。
例えば、
{{ if eq 1 1 }} 同じ {{ end }}
は、パイプを使って次のように書き換えることができます。
{{ eq 1 1 | if }} 同じ {{ end }}
コンテキスト
. （ドット）には現在参照できる値または変数群が格納されています。
例えばテンプレートの最上位では、そのページで使用できるデータ・変数が全て格納されていますが、range や with の中では現在の値のみが格納されています。
range や with の中でサイト全体の値を参照する場合は、 $. を使ってグローバルな値を取得することができます。
{{ range array }}
現在の値は {{ . }} です。
サイトの名称は {{ $.Site.Title }} です。
{{ end }}
パラメータ
Hugo では、サイト全体またはページ単位で独自のパラメータを定義することができます。
定義したパラメータはテンプレートから自由に参照できます。
ページパラメータ
Hugo では各ページの フロントマター でタイトルや日付等の属性を埋め込みます。（ 導入編 の “記事の追加” を参照）
パラメータも同じく、このフロントマターで指定します。例えば、notoc というパラメータを追加した場合、
+++
date = "2016-04-05T12:00:00+09:00"
draft = true
title = "hello"
notoc = true
+++
ページテンプレートでは以下のように .Params.notoc で参照できます。
{{ if not .Params.notoc }}
<div id="toc" class="well col-md-4 col-sm-6">
{{ .TableOfContents }}
</div>
{{ end }}
サイトパラメータ
サイト全体のパラメータは config.toml ファイルで指定します。
config.toml では params の属性として追加してください。
baseurl = "http://staff.feedtailor.jp/"
title = "feedtailor Inc. スタッフブログ"
...
[params]
author = "feedtailor Inc."
location = "Osaka, Japan"
サイトパラメータは以下のように .Site.Params.名前 で参照できます。
{{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
今回は Hugo レイアウトテンプレートの基本的な文法をご説明しました。
これらを組み合わせてテンプレートをどのように書くかを次回以降でご紹介していこうと思います。
feedtailor では、静的サイトジェネレータの利用に限らず、ウェブサイト静的化の御相談を承っておりますのでお気軽にお問い合わせください。