Hugoの勘所

2021年2月1日 08:19

こちらの記事でHugoの基本的な使い方について書きました。
今回は、もっと深堀りしてHugoの知っておいたほうが楽になることをまとめます。

Hugoの関数

HugoではGo言語で作られており、 {{ }} で囲まれている部分はアクションと呼ばれます。
Hugoを使うにあたって抑えておいたほうが良い関数を記載します。

条件分岐

{{ if x }} ... {{ else if y }} ... {{ else }} ... {{ end }}

Go言語では、以下はfalse扱いです。
・false
・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"