Hugoでmarkdownにscriptを書く

Hugoは非常に便利な静的サイトジェネレータですが、markdownにscriptを書きにくいという問題があります。例えばhugo/content/foo/test.mdが以下のような場合、

---
layout: hoge
permalink: /foo/test/
---

<div>
  <script>
    setBar("fuga");
  </script>
</div>

hugo/public/foo/test/index.htmlの出力結果は以下になります。つまりスクリプトの中身が勝手にエスケープされてしまいます。これではスクリプトが動作しません。

<html>
  <head>...</head>
  <body>
    ...
    <div>
      <script>
        setBar(&ldquo;fuga&rdquo;);
      </script>
    </div>
  </body>
</html>

この問題はshortcodeを使う事で解決します。まずはhugo/layouts/shortcodes/script.htmlを作成し以下のように記述します。*.htmlの*はshortcodeの呼出名になります。

<script>
{{ .Inner | safeJS }}
</script>

そしてhugo/content/foo/test.mdを以下のように書き換えます。

---
layout: hoge
permalink: /foo/test/
---

<div>
  {{< script >}}
    setBar("fuga");
  {{< /script >}}
</div>

これでscriptタグの中身はHTMLエスケープされなくなりました。後は好きなだけスクリプトを書けます。

marmooo's blog