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 %}
{% endblock %}
_module/layout/default.njk
<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のほうが強力らしい）慣れれば使えそうなので引き続き使っていきたいとおもいます。
