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ファイルが作成されます。

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

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

上記で紹介したextendsblockを使用すれば十分効率よく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>

関連記事

  • Nunjucksで独自のファンクションを実行する

    gulp-dataと組み合わせると、引数のような形で各ファイルにデータ(変数など)を渡すことができます。同じ容量で、変数ではなくファンクション自体をgulp-dataで設定すると、自分で定義したファン...


  • gulp-nunjucks-renderでNunjucksをgulpでコンパイルする方法

    Nunjucksをgulpでコンパイルする方法を紹介します。今回はgulp-nunjucks-renderを使用します。まずは、コマンドラインでgulp-nunjucks-renderをインストールし...


  • テンプレートエンジンのnunjucksとhighlight.js組み合わせる

    便利なテンプレートエンジンのnunjucksのテンプレートの中で、コードをシンタックスハイライト(色付け)する便利なライブラリのhighlight.jsを組み込む方法を紹介します。nunjucksのテ...


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

    htmlのおすすめテンプレートエンジンNunjucksはとても便利なのです。extendsという機能を使えば、ヘッダやフッタの共通部分を作成しておき(ベースとなるファイル)、各ページではページごとに変...


  • Front Matterでファイルごとに変数を持たせる

    Front Matterを使えば、各ファイルに変数を定義して簡単に扱えるようになります。各ページの先頭に以下のように---で囲って情報を定義します。content.attributesでFront M...


  • gulpのpipeで独自のファンクションを実行する

    gulpのpipeの中で独自に定義したファンクションを実行し、srcで指定した各ファイルの内容を変更したい場合、through2というモジュールを使用すれば実現できます。through2を使えばプラグ...


  • gulp|gulpの基本的な使い方

    gulpの基本的な使い方を紹介します。gulpというツールを利用すれば、less,sassのコンパイルやファイルコピーなどが簡単にできるようになります。


  • less|cssに変数を使い実装を効率化する方法

    lessには変数を使うだけでなく、変数の色をX%明るくしたり、暗くしたり、透過したり、といった便利な関数も用意されています。また、要素を入れ子にして設定したり、関数を自作できるなど、とても便利な機能が...


  • gulp|watchやlivereloadのタスクを停止する方法

    gulpでwatchやlivereloadを停止したい場合、ctrl+Cで停止することができますが、sublime textやatomのプラグインからwatchなどを起動した場合、ctrl+Cで停止す...


  • gulpでディレクトリ構造を維持したままdestにコピーする

    gulpで以下のようなフォルダ構成で、page.html、page2.htmlをそれぞれのフォルダ配下のフォルダにコピーする場合、普通にdestを指定するだけではうまくいかないことがあります。コピーす...