omachizura

仕事メモ、役に立ったスキルをまとめています。


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>
    <p>Nunjucksの基本</p>
  </header>

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

  <footer>
    <p>コピーライト</p>
    <p>問い合わせ先</p>
  </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>
    <p>Nunjucksの基本</p>
  </header>

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

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

各ページごとに記載する箇所にblock要素を定義しておきます。Nunjucksでは{% %}でいろいろな処理を囲みます。

ベースとなるファイルができたので、各ページを作成します。

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

<p>Nunjucksの基本を説明します。。。</p>

  <footer>
    <p>コピーライト</p>
    <p>問い合わせ先</p>
  </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>
    <p>Nunjucksの基本</p>
  </header>
<!-- ↑block要素の中身を定義しておきます-->
  {% endblock %}

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

  {% block footer %}
  <footer>
    <p>コピーライト</p>
    <p>問い合わせ先</p>
  </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を宣言します-->
<p>Nunjucksの基本を説明します。。。</p>
{% 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>

<p>Nunjucksの基本を説明します。。。</p>

  <footer>
    <p>コピーライト</p>
    <p>問い合わせ先</p>
  </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>
    <p>Nunjucksの基本</p>
  </header>
<!-- ↑block要素の中身を定義しておきます-->
  {% endblock %}

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

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