Hugoのテンプレートを作成する為の基礎知識

こんにちはnasustです。 今回の記事から、Hugoのテンプレートを作成する為の基礎知識を解説します。

Hugoのテンプレートは一端理解すればシンプルなので簡単です。

特徴

特徴は次の通りです。

  • MarkdownからHTML変換に用いるテンプレートは、ディレクトリやファイル名のルールに則ってマッチングされ使用されます。
  • テンプレートにはページ用やリスト用などの種類があります。

    • ページ用とは、Markdownを1つのHTMLページに変換するテンプレートです。
    • リスト用とは、トップページやカテゴリーのアーカイブなど記事の要約など時系列で並べて表示するテンプレートです。
  • テンプレートは変数をHTMLに出力する機能があります。

    • {{ }}で囲まれた変数がHTMLの文字として出力されます。
    • 変数には組み込み変数があり、それにタイトルや文章が格納されます。
  • テンプレートにはifやrangeなどの制御構文があります。

大まかな特徴はこの通りです。これらを理解すればテンプレートを作成するには難しくありません。

変数について

Hugoの変数について解説します。以下の例で説明します。

{{ $var := "こんにちは" }}
<p>
    {{ $var }}
</p>

{{ $var := }}は変数を宣言しています。:=は初期の値を代入しています。 {{ $var }}は文字列として出力されます。

<!-- 結果 -->
<p>
    こんにちは
</p>

変数はデフォルトでHTMLエスケープされます

{{ }}はデフォルトでHTMLのエスケープされます。

{{ $var := "<span>こんにちは</span>" }}
<p>
    {{ $var }}
</p>
<!-- 結果 -->
<p>
     &lt;p&gt;こんにちは&lt;/p&gt;
</p>

エスケープしたく無い場合

エスケープしたく無い場合は、パイプという機能を使用します。

{{ $var := "<span>こんにちは</span>" }}
<p>
    {{ $var | safeHTML }}
</p>
<!-- 結果 -->
<p>
     <span>こんにちは</span>
</p>

パイプという機能を使用することで、そのまま出力することが出来ました。 |はパイプを表しており、変数など加工したい場合に使用します。 safeHTMLは変数出力のエスケープを解除します。 他の機能などは別の記事で解説します。

変数の上書き

変数は別の値を代入できます。

{{ $var := "こんにちは" }}
<p>
    {{ $var = "こんばんは" }}
    {{ $var }}
</p>
<!-- 結果 -->
<p>
     こんばんは
</p>

変数を上書きする場合は = を使用します。

ページ特有の組み込み変数

テンプレートには、変換時に使用する組み込みの変数があります。

<div class="content">
    {{ .Content }}
</div>
<!-- 結果 -->
<div class="content">
    こんにちはnasustです。今回の解説は・・・
    〜〜
    〜〜
</div>

.ContentはMarkdownの文章です。 これは変数出力する時にHTML変換されます。

このようにページ特有の組み込み変数など用いてHTML出力してきます。 他の組み込み変数については他の記事で解説します。

制御構文

制御構文はifrangeなどあります。

if

ifは他のプログラムと同じように比較して真や偽の場合の プログラムを実行できます。

{{ $var := true }}
{{ if $var }}
    <p>
        こんにちは
    </p>
{{ else }}
    <p>
        こんばんは
    </p>
{{ end }}
<!-- 結果 -->
<p>
     こんにちは
</p>

$varをfalseにすると偽の処理が行われます。

<!-- 結果 -->
<p>
     こんばんは
</p>

お気づきかと思いますが、ifは、{{ if }} {{ end }}で囲まれています。 これはHugoのブロック構文の仕様になっています。

range

rangeは繰り返し処理を行います。

{{ $var := slice 1 2 3 4 5  }}
<ul>
{{ range $var }}
    <li>{{ . }}</li>
{{ end }}
</ul>
<!-- 結果 -->
<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
<ul>

sliceはスライスを作成する関数です。

Hugoは、これらの変数と制御構文を利用してテンプレートを記述します。

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