こんにちは、tamaoki (@t0shiya) です。
今回は、静的サイトジェネレータ Hugo のレイアウトテンプレートについて書きたいと思います。
Hugo では、テンプレートの記述に Go 言語の html/template ライブラリを使用しています。 一見複雑そうに見えますが、簡単な記法で多くのことを実現できます。
テンプレートの種類
Hugo では、以下の３種類のテンプレートでサイトを構築します。
- Single
- 単一のコンテンツを表示するページ
- List
- 複数のコンテンツのリストを表示するページ
- Homepage
- ホームページ（トップページ）
多くのサイトでは、トップページからあるコンテンツのリストを表示し、そこから目的のコンテンツページを表示する構成になっていると思います。
上の３つを組み合わせることで複雑なサイトを構築できるようになります。
Hugo では、その他に補助的なテンプレートが用意されています。何れも上のテンプレートに組み込んで（include）使用します。
種類によって、テンプレート内で使用出来る変数が異なります。
- Partial Templates
- ページ内の共通パーツ
- Content Views
- コンテンツを表示するパーツ
- Taxonomy Terms
- Taxonomy（カテゴリやタグなどの分類）のリストを表示するパーツ
トップページ
まずサイトのトップページを作りましょう。前回 で config.toml に書いた baseurl で表示するページです。
ファイルは layouts フォルダ直下に index.html という名前で作成します。content フォルダ内ではありませんので注意してください。
以下は本ブログのトップページのソースコードです。
<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
{{ partial "head" . }}
<body>
<div class="container">
<div id="container">
{{ partial "header" . }}
<div class="outer">
{{ partial "article_list" . }}
{{ partial "sidebar" . }}
</div>
</div>
{{ partial "footer" . }}
</div>
</body>
</html>
多くの場合、ページのヘッダやフッタ等、複数のページで共通化できる部分があると思います。本ブログでは、headタグ、ページのヘッダ、ページ中央の記事のリスト、サイドバー、フッタを Partial テンプレートとして共通化しています。
Partial テンプレートは layouts フォルダ内に partials フォルダを作成してそこに置きます。使用するときは、
{{ partial "ファイル名(拡張子なし)" . }}
と書きます。例えば、上の {{ partial “head” . }} は layouts/partials/head.html を読み込んでいます。
partial を使用する時、ファイル名の後ろの . （半角ドット）を忘れないようにしてください。
Go テンプレートでは . は、現在スコープのコンテキストを表しています。もう少し砕いていうと、その場で使える変数を入れている箱です。
上の Partial の例では、指定したファイルのテンプレートに . を渡している、つまりその場で使える全ての変数が Partial テンプレートでも使えますよ、ということです。
.Data のようにある変数だけを渡すこともできますが、良く分からなければ毎回 . を渡しても良いでしょう。
その他のテンプレートや Partial の中身については順次ご説明します。
feedtailor では、SSGの利用に限らず、ウェブサイト静的化の御相談を承っておりますのでお気軽にご相談ください。