テンプレート（Nunjucks）を利用する

ご注意ください

この記事は開発者向けの内容です。カスタマイズを前提としているためサポート対象外になります。事前にご理解の上ご利用ください。

テンプレート（Nunjucks）を利用する

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

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

ここでは、よく使われるNunjucksの文法について説明します。
なお、詳しい文法仕様については、公式サイトをご覧ください。

補足

📘 公式サイトの記法について
KARTEの実装上の問題で、Nunjucksの一部記法が使えないことがあります。

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

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

#{ 変数 }

補足

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

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

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

#{ 変数 }

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

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

if文

• HTML

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

for文

• HTML

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

フィルター

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

• sort
  オブジェクトの配列をソートします
  引数：

  • reverse：降順にするか
  • caseSens：大文字小文字を区別するか
  • attr：ソートで使用するプロパティ名

• HTML

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

四則演算

Nunjucksでは変数に対して四則演算が可能です。

{% 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 }")