KARTEのアクションでは、静的変数の置換やHTML出力処理のために、テンプレートエンジンを使用しています。

Nunjucksテンプレートを使うことで、「静的変数」や「ユーザー情報変数」の置換以外にも、条件分岐や繰り返しなどのロジックを、HTMLに埋め込むことができます。
HTMLメールのような、JavaScriptを記述できないテンプレートでも、Nunjucksテンプレートを使うことで、ユーザー毎にコンテンツの動的出しわけをすることができます。

ここでは、よく使われるNunjucksの文法について説明します。

なお、詳しい文法仕様については、公式サイトをご覧ください。

📘

公式サイトの記法について

KARTEの実装上の問題で、Nunjucksの一部記法が使えないことがあります。

静的変数を定義して利用する

[カスタマイズ] ＞ [変数] ＞ [静的変数] に設定済みの変数は、下記形式で呼び出せます。

#{ 変数 }

🚧

変数の呼び出し形式が、Nunjucks仕様のデフォルトと異なります

Nunjucks仕様では、デフォルトで変数を{{変数名}}の形式で呼び出します。KARTEでは形式が異なり、#{変数名}の形式で呼び出す点にご注意下さい。

ユーザー情報を埋め込んで利用する

[カスタマイズ] ＞ [変数] ＞ [ユーザー情報変数]に設定済みの変数についても静的変数と同様に、下記形式で呼び出せます。

#{ 変数 }

JavaScriptを利用せず、静的に書き換える

Nunjucksテンプレートを使うと、 HTMLの中にロジックを埋め込むことができます。
通常はScript内で同様の制御が可能なので、HTMLメールなどScriptが使えないテンプレートの中で使用してください。

if文

{% if title %}
  <p>#{ title }</p>
{% elif default_title %}
  <p>#{ default_title }</p>
{% else %}
  <p>タイトル</p>
{% endif %}

for文

<ul>
{% for item in items %}
  <li>#{ item.title }</li>
{% endfor %}
</ul>

フィルター

フィルターを使って、出力方法をデフォルトから変更することができます。

sort

• オブジェクトの配列をソートします
• 引数
  • reverse
    • 降順にするか
  • caseSens
    • 大文字小文字を区別するか
  • attr
    • ソートで使用するプロパティ名

<ul>
  {% for item in items | sort(false, true, 'email') %}
    <li>#{ item.name }, #{ item.email }</li>
  {% endfor %}
</ul>

四則演算

{% set count = 0 %}
{% set count = count + 7 %}
{% set count = count - 1 %}
{% set count = count * 4 %}
{% set count = count / 2 %}
{% set count = count % 5 %}

Scriptにロジックを埋め込む

Nunjucksはバックエンドで処理されるため、スクリプトでエンドユーザーにロジックを隠したい場合に活用できます。
HTMLと記法が異なるためご注意ください。

{# set user_name = "karte" #}
console.log("#{ user_name }")