Nunjucksの基本的な使い方 -extends,block,include-

htmlのおすすめテンプレートエンジンNunjucksがとても便利なのですが、日本語のページがほとんど見当たらなかったので、基本的な使い方を紹介します。

extends

ホームページを作成していると、htmlのヘッダとフッタの部分はほぼ同じ記述になると思います。

<!DOCTYPE HTML>
<html>

<head>
  <title>サンプルホームページ</title>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>タイトル</title>
    <meta name="description" content="概要">
</head>

<body>
  <header>
    Nunjucksの基本
  </header>

<!-- ↓この部分がページごとに変わるだけ-->
  <h1>Nunjucksとは</h1>
  記事内容A
  記事内容B
<!-- ↑この部分がページごとに変わるだけ-->

  <footer>
    コピーライト
    問い合わせ先
  </footer>
</body>
</html>

extendsという機能を使えば、ヘッダやフッタの共通部分を作成しておき（ベースとなるファイル）、各ページではページごとに変わるコンテンツのみ記載するだけでよくなります。よくテンプレートの継承（Template Inheritance）という呼び方をします。具体的には以下のように記載します。

_base.njk

<!DOCTYPE HTML>
<html>

<head>
  <title>サンプルホームページ</title>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>タイトル</title>
    <meta name="description" content="概要">
</head>

<body>
  <header>
    Nunjucksの基本
  </header>

<!-- ↓block要素を定義しておきます-->
{% block content %}{% endblock %}
<!-- ↑block要素を定義しておきます-->

  <footer>
    コピーライト
    問い合わせ先
  </footer>
</body>
</html>

各ページごとに記載する箇所にblock要素を定義しておきます。Nunjucksでは{% %}でいろいろな処理を囲みます。ベースとなるファイルができたので、各ページを作成します。

p1.njk

{% extends '_base.njk' %}<!--ベースとなるファイルをextendsで宣言します-->
{% block content %}<!--ベースファイルで定義したblockを宣言します-->
Nunjucksの基本を説明します。。。
{% endblock %}

必要なページ分同じように作成します。コンパイルすると以下のようなhtmlファイルが作成されます。

p1.html

<!DOCTYPE HTML>
<html>

<head>
  <title>サンプルホームページ</title>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>タイトル</title>
    <meta name="description" content="概要">
</head>

<body>
  <header>
    Nunjucksの基本
  </header>

Nunjucksの基本を説明します。。。

  <footer>
    コピーライト
    問い合わせ先
  </footer>
</body>
</html>

block

block要素は複数定義することができます。また、ベースとなるファイルのblock要素の中身はextendsしたページの初期値となります。言葉で説明してもわかりづらいので、具体例を紹介します。

ベースファイルを以下のように定義します。

複数のblock要素を定義し、block要素の中身も定義します。

_base.njk

<!DOCTYPE HTML>
<html>

<head>
  <title>サンプルホームページ</title>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{% block title %}{% endblock %}</title><!-- block要素を定義しておきます-->
    <meta name="description" content="{% block description %}{% endblock %}">
</head>

<body>
  {% block header %}
<!-- ↓block要素の中身を定義しておきます-->
  <header>
    Nunjucksの基本
  </header>
<!-- ↑block要素の中身を定義しておきます-->
  {% endblock %}

<!-- ↓block要素を定義しておきます-->
{% block content %}{% endblock %}
<!-- ↑block要素を定義しておきます-->

  {% block footer %}
  <footer>
    コピーライト
    問い合わせ先
  </footer>
  {% endblock %}
</body>
</html>

ベースファイルをextendsするファイルは以下のように定義します。

p1.njk

{% extends '_base.njk' %}<!--ベースとなるファイルをextendsで宣言します-->

{% block title %}
タイトルテスト
{% endblock %}

{% block description %}
概要テスト
{% endblock %}

{% block header %}<!--ヘッダの中身を置き換えます-->
<header>ヘッダ置き換えテスト</header>
{% endblock %}

{% block content %}<!--ベースファイルで定義したblockを宣言します-->
Nunjucksの基本を説明します。。。
{% endblock %}

コンパイルすると以下のようなhtmlファイルが作成されます。

各ブロック要素の中身が置き換わっています。footerのblockは記載していませんが、ベースファイルで定義した値がそのまま出力されます。

p1.html

<!DOCTYPE HTML>
<html>

<head>
  <title>サンプルホームページ</title>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>タイトルテスト</title>
    <meta name="description" content="概要テスト">
</head>

<body>

<header>ヘッダ置き換えテスト</header>

Nunjucksの基本を説明します。。。

  <footer>
    コピーライト
    問い合わせ先
  </footer>
</body>
</html>

include

上記で紹介したextendsとblockを使用すれば十分効率よくhtmlを作成できるのですが、includeを使えば他のhtmlファイル（nunjucksファイル）を使用することができます。具体的には以下の使い方をします。

_head.njk

<head>
  <title>サンプルホームページ</title>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{% block title %}{% endblock %}</title>
    <meta name="description" content="{% block description %}{% endblock %}">
</head>

ベースファイルにincludeを定義します。includeの場所にincludeしたファイルの内容が置き換わります。

_base.njk

<!DOCTYPE HTML>
<html>

{% include '_head.njk' %}<!-- includeで外部ファイルを取り込む-->

<body>
  {% block header %}
<!-- ↓block要素の中身を定義しておきます-->
  <header>
    Nunjucksの基本
  </header>
<!-- ↑block要素の中身を定義しておきます-->
  {% endblock %}

<!-- ↓block要素を定義しておきます-->
{% block content %}{% endblock %}
<!-- ↑block要素を定義しておきます-->

  {% block footer %}
  <footer>
    コピーライト
    問い合わせ先
  </footer>
  {% endblock %}
</body>
</html>