Nunjucksの変数内で改行<br>を使いたい！
寒さが戻ってきて、さっそくおなかの調子が悪いyanagimachiです。
暖かくなると花粉症に悩まされるので、どちらにしても春先は調子が悪いのですが・・・。
Nunjucksとは？
変数を使えたり、関数を使えたりする便利なHTMLテンプレートです。前、kourakuさんが紹介したhtmlテンプレート「gulp-html-extend」と似たようなものです。
インストールの仕方や使い方はその辺に詳しいkourakuさんやishidaさんにお任せして、先日詰まった件とその解決法についてご紹介しようと思います。
変数で改行<br>を使うとそのまま出力されちゃうんだけど!?
弊社のフロントエンドエンジニアの趣味を紹介するページを作るとすると、以下のような構成になります。
//パーツ「_pager.html」：変数
{% set data = {
'staff01': {'title':'フットサルが趣味。<br>最近Drupalに興味を持つ。', 'name':'ishida'},
'staff02': {'title':'VRといえばこの人。<br>嫁が趣味。', 'name':'kouraku'},
'staff03': {'title':'海外ドラマ鑑賞が趣味。<br>グロくても見ながらごはんが食べれます。', 'name':'yanagimachi'}
}
%}
//パーツ「_pager.html」：HTML
<ol class="mod-pager">
<li class="prev">
<a href="/staff/{{prev}}/">
<figure><img src="/img/staff/ph_thumb_{{prev}}.png" alt="{{data[prev].name}}"></figure>
<h2>{{data[prev].title}}</h2>
</a>
</li>
<li class="next">
<a href="/staff/{{next}}/">
<figure><img src="/img/staff/ph_thumb_{{next}}.png" alt="{{data[next].name}}"></figure>
<h2>{{data[next].title}}</h2>
</a>
</li>
</ol>
//個別のHTML「pages/staff02.html」：変数（kourakuさんのHTMLとします）
prev: 'staff01'
next: 'staff03'
//個別のHTML「pages/staff02.html」：HTML（インクルード）
{% include "_partial/_pager.html" %}
HTML出力結果
<ol class="mod-pager">
<li class="prev">
<a href="/staff/staff01/">
<figure><img src="/img/staff/ph_thumb_staff01.png" alt="ishida"></figure>
<h2>フットサルが趣味。<br<最近Drupalに興味を持つ。</h2>
</a>
</li>
<li class="next">
<a href="/staff/staff03/">
<figure><img src="/img/staff/staff03.png" alt="yanagimachi"></figure>
<h2>海外ドラマ鑑賞が趣味。<br<グロくても見ながらごはんが食べれます。</h2>
</a>
</li>
</ol>
Nunjucksのデフォルトの機能で、HTML部分がエスケープされてしまいました。
safeを使って、HTMLをエスケープしないようにする
「{{ xxx | safe }}」という形式で書くと、HTMLをエスケープせず出力します。
//HTML
<ol class="mod-pager">
<li class="prev">
<a href="/staff/{{prev}}/">
<figure><img src="/img/staff/ph_thumb_{{prev}}.png" alt="{{data[prev].name}}"></figure>
<h2>{{data[prev].title | safe}}</h2>
</a>
</li>
<li class="next">
<a href="/staff/{{next}}/">
<figure><img src="/img/staff/ph_thumb_{{next}}.png" alt="{{data[next].name}}"></figure>
<h2>{{data[next].title | safe}}</h2>
</a>
</li>
</ol>
HTML出力結果
<ol class="mod-pager">
<li class="prev">
<a href="/staff/staff01/">
<figure><img src="/img/staff/ph_thumb_staff01.png" alt="ishida"></figure>
<h2>フットサルが趣味。<br>最近Drupalに興味を持つ。</h2>
</a>
</li>
<li class="next">
<a href="/staff/staff03/">
<figure><img src="/img/staff/staff03.png" alt="yanagimachi"></figure>
<h2>海外ドラマ鑑賞が趣味。<br>グロくても見ながらごはんが食べれます。</h2>
</a>
</li>
</ol>
これで改行も使えるようになりました。
