基礎知識
- HugoのテンプレートエンジンはGo言語標準の Package template(html/template)
変数
:=で変数に値を代入
BaseUrl(設定ファイルで設定)をテンプレート中の複数箇所で使う場合に変数に入れたりする。
{{ $baseUrl := .Site.BaseUrl }}
記事のフロントマターの値を取得
フロントマターとは、各記事の冒頭にtoml等で書く記事のメタデータ
{{ .Params.Title }}
設定ファイル(config.toml)の値を取得
{{ .Site.Params.CopyrightHTML }}
グローバル変数にアクセス
$を付けると、場所関係なくグローバル変数にアクセスできる
{{ $.Site.Title }}
コメント
html生成時に破棄される
{{/* a comment */}}
こんな書き方は不可(エラー)
{{ .Site.Title /* サイトのタイトル */}}
サニタイジング
UNIXコマンドのPipe処理のような記述で、HTMLをサニタイジング(エスケープ)してくれる。
(< を < に変換したりとか。)
{{. | html}}
urlize
URLに使いたい文字列をサニタイズ。
半角スペースを - に変換したり。
{{ . | urlize }}
HTMLコメントの出力
素のHTMLコメントは生成時に消えてしまうので処理が必要
{{ "<!--[if lt IE 8]>" | safeHTML }}
<p class="browserupgrade">あなたは旧いWebブラウザを使用されています。
安全性を確保し、表示の適正化するために<a href="http://browserupgrade.com/">ブラウザをアップデート</a>してください。</p>
{{ "<![endif]-->" | safeHTML }}
インクルード
パーシャル(layout/partial ディレクトリに入れたコードの断片、スニペット)のインクルード
{{ partial "head.html" . }}
同上の処理を template でも書けるが、上の記述の方が簡潔
{{ template "partials/header.html" . }}
生成HTMLのインデントを揃えたい場合
パーシャル読み込み行にインデントを入れると、そのインデントがそのままHTMLに反映される
<nav id="main-menu">
{{ partial "menu.html" .Site.Menus.main }}
</nav>
左詰めにした方が、生成後のHTMLのインデントを制御しやすい
<nav id="main-menu">
{{ partial "menu.html" .Site.Menus.main }}
</nav>
条件分岐
設定ファイル(config.toml)に値が設定されていれば処理
{{if .Site.Params.Tagline}}<p class="tagline">{{ .Site.Params.Tagline }}</p>{{ end }}
フロントマターに値が設定されていれば処理
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
これでもいける？
{{ if isset .Params.Title }}<h4>{{ .ParamsTitle }}</h4>{{ end }}
if 文、if else 文も使える。if not で否定
{{if .Description}}<p class="lead">{{ .Description }}</p>
{{else}}値がない場合の処理{{end}}
withで等価の処理。withに続けたものが .(ドット) にセットされる
短く書けるのでこの書き方が良いと思う
{{ with .Description }}<p class="lead">{{ . }}</p>{{ end }}
データ件数で分岐処理
{{ if gt (len .TableOfContents) 2500 }}{{.TableOfContents}}{{ end }}
ループ・配列の出力
ループ処理。配列の要素が順に.にセットされる
例はタグ出力。値がなければ何も出力されない
{{ range .Params.tags }}<a href="/tags/{{ . | urlize }}">{{ . }}</a>
{{ else }}タグ無し{{ end }}
キーと値の出力
{{range $index, $element := array}}
{{ $index }} : {{ $element }}
{{ end }}
指定件数を表示
{{ range first 10 .Data.Pages }}
<li>{{ .Title }}</li>
{{ end }}
他にソートなどもできる