Developer ToolsのコンソールにHugoの変数をダンプする

こんにちはnasustです。 Hugoのテンプレートのデバックで変数をダンプする場合は以下のように出力します。

{{ printf "%#v" $value }}
html

これだとHTMLに内容が出力されるのでゴミになりやすいです。 そこでDeveloper Toolsのコンソールに出力をするように部分テンプレートを用意します。

テンプレート

<script>
console.log( '%cHugo%c ⭐️ %s' ,
        'background: #FFA500;border-radius: 0.5em;color: white;font-weight: bold;padding: 2px 0.5em;' ,
        '',
        {{ . }}
    );
</script>
html

使用方法

{{ partial "log" ( printf "%#v" . ) }} Page変数をダンプ
{{ partial "log" ( printf "hoge: %s" "fuga" ) }} printf "hoge: %s" "fuga"の結果をコンソールに出力
html

表示例

prev