Hugoの勘所
こちらの記事でHugoの基本的な使い方について書きました。
今回は、もっと深堀りしてHugoの知っておいたほうが楽になることをまとめます。
Hugoの関数
HugoではGo言語で作られており、 {{ }} で囲まれている部分はアクションと呼ばれます。
Hugoを使うにあたって抑えておいたほうが良い関数を記載します。
条件分岐
{{ if x }} ... {{ else if y }} ... {{ else }} ... {{ end }}
Go言語では、以下はfalse扱いです。
・false
・0
・サイズ0の配列、マップ
・空文字列
・nil
with
withアクションを使うことで、 .(ドット)をwithで定義した値に置換できます。
{{ with "Sam" }}
{{ printf "Hello %s" . }}
{{ end }}
-> Hello Sam
テンプレート構文
Hugoで使用される基本となるテンプレート構文を説明します。
template
Hugoが定義しているテンプレートファイルを読み込むための構文。
オリジナルで作成したテーマとは別物。
https://github.com/gohugoio/hugo/tree/master/tpl/tplimpl/embedded/templates
{{ template “_internal/disqus.html” . }}
partial
オリジナルで作成したテーマを読み込むための構文。
{{ partial “article-header.html” . }}
block + define
Vue.jsでいうslotのようなもの。
blockでは位置を指定し、defineでblockが定義されている箇所に書きたいHTMLを挿入できる。
{{ block “main” . }}
...
{{ end }}
{{ define "main" }}
...
{{ end }}
例えば、home、category、postのそれぞれのページでheadタグ内は共通で仕様したい場合がある。
その場合、body内をblockで定義しておき、各ページのHTMLでdefineを定義することで共通化できる。
テンプレートの読み込み優先度
テンプレートには読み込まれる優先順位があるので注意する。基本テーマをthemes配下に置いて、気に入らないページをlayoutsでカスタマイズできる。
1. layouts/partials/*<PARTIALNAME>.html
2. themes/<THEME>/layouts/partials/*<PARTIALNAME>.html
変数
サイト変数
config.tomlに定義したサイト変数にアクセスする場合は、.Site.Params.[変数] でアクセスできる。
以下の例だと、.Site.Params.name -> "Sam"
[Params]
name = "Sam"