Hugoのテンプレートを分かりやすく解説

こんにちはnasustです。 Hugoのテンプレートについて分かりやすく解説します。

Hugoのテンプレートとは

layoutディレクトリにあるhtmlファイルがHugoのテンプレートです。 Hugoのテンプレート機能は{{ }}に囲まれた変数をHTMLに出力します。

{{ $variable := "abc&def" }}
{{ $variable }}
<!-- 結果: abc&amp;def -->
html

変数のテンプレートでの出力の詳しい解説は、 「テンプレートで変数の出力について詳しく解説」 を参照してください。

ページのタイトルを出力したい場合は、.Title使用します。

{{ .Title }}
<!-- 結果: Hugoのテンプレートを分かりやすく解説  -->
html

.Title.はページの変数を表しています。.で様々なページの情報にアクセス出来ます。

Page Variables | Hugo

テンプレートの種類

HugoのHTMLテンプレートは、大まかに4種類あります。

  • single.html … Markdownの記事テンプレート
  • list.html … アーカイブページなどの各記事へのリンクページ
  • baseof.html … single.htmlとlist.htmlのベースとなるテンプレート
  • 部分テンプレート … 共通パーツなどのテンプレート

single.htmlとlist.htmlを組み合わせる事によりCMSようににウェブサイトを構築する事が出来ます。

baseof.html の使い方

baseof.htmlはsingle.htmlとlist.htmlの共通部分を記述します。主にhtmlタグやheadタグなど記述します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        〜〜〜
    </head>
    <body>
        {{ block "content" . }}
        {{ end }}
    </body>
</html>
html

block と define

{{ block "content" . }}{{ end }}は、ブロックという機能です。defineで、ブロックの部分のテンプレートをsingle.htmlやlist.htmlで記述出来ます。

{{ define "content" }}
    <p>Content</p>
{{ end }}
html

このようにsingle.htmlやlist.htmlで、defineをテンプレートに記述すると以下のテンプレートと同等になります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        〜〜〜
    </head>
    <body>
         <p>Content</p><!-- contentブロックが上書きされる -->
    </body>
</html>
html

baseof.htmlで共通部分を記述して、single.htmlやlist.htmlに固有内容を書く事が出来ます。

HTMLテンプレートとコンテンツのマッチング

Hugoにはテンプレートのマッチング機能があります。 コンテンツに合わせたテンプレートを使用する事が出来ます。

Hugoのコンテンツはセクションという単位で管理されています。 要するにセクションとはcontentディレクトリ以下に作成するディレクトリの事です。content/postというディレクトリはpostセクションとして扱われます。

このセクションとテンプレートのマッチングする事が出来ます。

デフォルトのテンプレートはlayout/_defaultディレクトリに作成します。 postセクションに最適化されたsingle.htmlやlist.htmlを使用するには、layout/postディレクトリにsingle.htmlやlist.htmlを作成します。

Hugo’s Lookup Order | Hugo

ちなみにセクションはディレクトリと同じなので、サブセクションを定義する事が出来ます。content/post/generalように出来ます。

部分テンプレート

ボタンやメニューなどのパーツの個々のテンプレートを記述する事が出来ます。 部分テンプレートはlayout/partialsディレクトリに作成します。

部分テンプレートを実行するには以下のように記述します。

<body>
    {{ partial "partial_template_name" . }}
</body>
html

layout/partials/partial_template_name.htmlが呼び出されます。

partial_template_name.htmlは以下の様に記述されています。

<p>部分テンプレート</p>
html

呼び出されると以下の内容になります。

<body>
    <p>部分テンプレート</p>
</body>
html

{{ partial }} で指定する “ . ” について

{{ partial "partial_template_name" . }}.は部分テンプレートにページ変数を渡しています。テンプレート名の後に1つだけ、変数を部分テンプレートに渡す事ができます。

複数の変数を渡す場合は、dict | Hugoの関数を使用するか、.Scratch | Hugoを使用します。

defineで部分テンプレートの定義

single.htmlやlist.html内で、defineブロックで、そのテンプレートしか使用できない部分テンプレートを定義する事ができます。

<body>
    {{ define "partial_template_name" }}
        <p>define 部分テンプレート</p>
    {{ end }}
    {{ partial "partial_template_name" . }}
</body>
html
<body>
    <p>define部分テンプレート</p>
</body>
html

defineの部分テンプレートと変数は共有されない

<body>
    {{ $var := "hoge" }}
    {{ define "partial_template_name" }}
        <p>{{ $var }}</p>
    {{ end }}
    {{ partial "partial_template_name" . }}
</body>
html

この様に同じテンプレートなので変数を使用できそうですが、別のテンプレート扱いなので、$varはdefine内から参照できません。エラーになります。

参照したい場合は、.Scratchを使用すると解決できます。

<body>
    {{ .Scratch.Set "var" "hoge" }}
    {{ define "partial_template_name" }}
        <p>{{ .Scratch.Get "var" }}</p>
    {{ end }}
    {{ partial "partial_template_name" . }}
</body>
html

.Scratchはページの変数に紐付けられているので、テンプレート間で変数のやり取りするのに便利です。

Scratchは便利

prevnext