2020年2月3日（月）

Nunjucks を使ってみる

f:id:jotaki:20200203155303p:plain

JavaScript製のHTMLテンプレート Nunjucks を初めて使ったのでメモ書きしておきます。
タスクランナーはGulp使ってます。

各ページ共通のhtmlの骨格をつくる

head.njk, header.njk, footer.njk の3つのファイルはまた別ファイルになりますが、各ページ共通の骨格を作るには default.njk と index.html に次のように書く。

index.html

{% extends '_module/layout/default.njk' %}
{% block content %}
  <!-- ここに書く内容が `<main class="main">` と `</main>` の間に挿入される -->
{% endblock %}

_module/layout/default.njk

<!DOCTYPE html>
<html lang="ja-jp">
  {% include "_module/common/head.njk" %}
<body>
  {% include "_module/common/header.njk" %}
  <main class="main">
    {% block content %}{% endblock %}
  </main>
  {% include "_module/common/footer.njk" %}
</body>
</html>

変数で値を渡す

set hoge = で変数を宣言する。
ページタイトルやmeta系の記述などで使う場合

index.html （各ページ設定）

{%
  set page = {
    name: 'トップページ'
  }
%}
{% include "_module/common/head.njk" %}

_module/common/head.njk

{%
  set site = {
    name: 'サイトタイトル'
  }
%}
<head>
  <title>{{ page.name }} ｜ {{ site.name }}</title>
</head>

マクロと引数を使う

マクロと引数を使うと値を渡してHTMLを生成できる

index.html

  {%- import '_module/component/button.njk' as macro -%}
  {{ macro.button( type='primary', label='ボタンのラベル名', href='https://www.yahoo.co.jp/', blank=true, class='hoge' ) }}

呼び出し側（button.njk）にはデフォルトの引数（引数が空だった場合に入る値）をいれておく

_module/component/button.njk

{% macro button( type='primary', label='ボタン', href='#', blank=false, class='' ) -%}
<p class="button button--{{ type | safe }}{{ ' ' + class if class }}">
  <a class="button__anchor" href="{{ href }}"{{ ' target="_blank"' | safe if blank }}>{{ label }}</a>
</p>
{%- endmacro %}

if を使って分岐や | safe を使ってフィルターがある。
フィルターはいろいろ用意されているので下記を参照
参考: https://mozilla.github.io/nunjucks/templating.html

ループを使う

パンくずを作ってみる

おもに詳解 Nunjucks − Mozilla 謹製テンプレートエンジン - Qiita のコピペですが、パンくずも下記のように作成できます。

index.html

{%
  set breadcrumbs = [
    {
      item: '親ページ名',
      href: '/parent/'
    },
    {
      item: '子ページ名'
    }
  ]
%}
{% include '_module/component/breadcrumb.njk' %}

_module/component/breadcrumb.njk

<div class="breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__anchor" href="/">
        <span class="breadcrumb__label">トップページ</span>
      </a>
    </li>
    {%- for breadcrumb in breadcrumbs %}
    <li class="breadcrumb__item">
      {%- if loop.last %}
      <span class="breadcrumb__label">{{ breadcrumb.item }}</span>
      {%- else %}
      <a class="breadcrumb__anchor" href="{{ breadcrumb.href }}">
        <span class="breadcrumb__label">{{ breadcrumb.item }}</span>
      </a>
      {%- endif %}
    </li>
    {%- endfor %}
  </ol>
</div>

いまのところ正直EJSとの違いを実感できていませんが（Nunjucksのほうが強力らしい）慣れれば使えそうなので引き続き使っていきたいとおもいます。