使い方

はじめに

Hugoのテンプレートの使い方をまとめます。

ベーステンプレート

基本的には、baseof.htmlでHTMLファイルの骨格を記述し、index.html、single.html、section.html、list.htmlなどで、ページの種類ごとの記述を行います。

この際、baseof.htmlでは、single.htmlなどで定義する部分を、「block」として定義し、その「block」を、single.htmlなどで、「define」します。

また、複数のテンプレートで共通に利用する記述は、「partial」として切り出すこともできます。

blockとpartialの明確な使い分けの指針を見つけることはできていないのですが、index.html、single.html、section.html、list.htmlなど、ページ種別によって変更するところはblock、そうでないところは、partialかなと思っています。あくまで私基準ですが。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html lang="ja">

<head>
{{ partial "head.html" . }}
</head>

<body>
{{ block "main" . }}
{{ end }}
</body>

上記では、ブロック内には何も記述していませんが、コンテンツを記述することもできます。この場合、mainブロックが定義されていない場合に、ここで記載したコンテンツがHTMLファイルに書き出されます。また、ブロックを複数定義することもできます。

partialで指定したファイルは、layoutsディレクトリ配下の、partialディレクトリに配置します。

  • root/
    • layouts/
      • _default/
      • partial/
    • themes/
      • <テーマ名>/
        • layouts/
          • _default/
          • partial

blockの定義

index.html、single.html、section.html、list.htmlなどでは、blockを定義します。定義をする際は、defineを使います。例えば、以下では、mainブロックの中で、タイトルとコンテンツを表示します。

ここでは、Goのテンプレートによるプログラミングができます。Page変数や、Site変数など、Hugoで定義された変数も利用することができます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{ define "main" }}
<main class="main">
    <div class="title">
        {{ .Title }}
    </div>
    <div class="contents">
        {{ .Content }}
    </div>
</main>
{{ end }}

上記では、{{ .Title }}は、ページのフロントマターで定義したタイトル(title)が、{{ .Content }}は、マークダウンファイルをHTMLに変換したコンテンツです。

なお、{{ define }}{{ end }}外に、何か記述した場合には、baseof.htmlの内容は利用されません。

最終更新日

January 23, 2021

inserted by FC2 system