テンプレートの種類とマッチング

こんにちはnasustです。 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>

block と define

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

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

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

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

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

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

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

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

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

{{ 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>
<body>
    <p>define部分テンプレート</p>
</body>

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

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

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

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

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

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

Scratchは便利

iOS、Android、Web、APIサーバーなどのフロントエンド・バックエンドを開発するソフトウェアエンジニアです。 UI/UXが好きです。かっこいいUIやWebデザインを眺めるのが趣味です。 このブログはソフトウェア開発関係の内容を記事にしています。
web service:
GitHubQiitaTwitterはてなブログ
handle name:
nasust
real name:
hideki mori
job:
ソフトウェアエンジニア
develop:
target: ios, android, web page, single page application, api server, system service, cli tool, linux embedded device

lang: c/c++, go, swift, objective-c, java, kotlin, typescript, dart, javascript, ruby, python, php

tool: vscode, xcode, android studio, photoshop, vim, docker