Nunjucksのテンプレート内で{{***}}を文字として使いたい！

半袖だと寒いと感じることも増えてきましたね。
お腹を冷やさないように気をつけたいyanagimachiです。

さて、今回はNunjucksのテンプレート内でInstafeed.jsなどで使われている{{***}}を使うと、思ったような表示ができない件についてです。

エラーが起きた記述

jsは基本的に外部ファイルに書くのですが、各個人ページにその人のインスタのフィードを取得したいと思って、テンプレートに直接以下のように記述していました。

<script>
    //instagram
    $(function(){
        var feed = new Instafeed({
            //略
            template: '<a href="{{link}}"><img src="{{image}}" alt="{{caption}}"></a>'
        });
        feed.run();
    });
</script>

しかしHTMLに書き出されたものを見たところ、以下のようになってしまいました。 当然インスタグラムのフィードは取得できません。

<script>
    //instagram
    $(function(){
        var feed = new Instafeed({
            //略
            template: '<a href=""><img src="" alt=""></a>'
        });
    feed.run();
    });
</script>

それぞれの{{***}}の使い方

Nunjucks

個別ページや共通で指定した変数をテンプレート内で使える方法です。 例えば個別ページで

---
title: "yanagimachi"
---

と指定して、テンプレート側で

<title>{{title}} | バシャログ。メンバー</title>

とすると、

<title>yanagimachi | バシャログ。メンバー</title>

と出力されます。

Instafeed.js

templateオプションで使える変数です。 今回は

• {{link}}:投稿のURL
• {{image}}:投稿した画像のパス
• {{caption}}:投稿のキャプション

を使用しました。

• Templating | Instafeed.js

つまりどうやって書けばいいのか

記述方法がかぶっていたため、変数がNunjucksで指定されていなくて空欄になってしまっていました。変数の外側にも{{}}をつけてあげる必要があります。

template: '<a href={{"{{link}}"}}><img src={{"{{image}}"}} alt={{"{{caption}}"}}></a>'

ダブルコーテーションの内側につけたり、ダブルコーテーションをなくすとエラーが出るので、ご注意ください。