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

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

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

これだと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>

使用方法

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

表示例

console

iOS、Android、Web、APIサーバーなどのフロントエンド・バックエンドを開発するソフトウェアエンジニアです。 UI/UXが好きです。かっこいいUIやWebデザインを眺めるのが趣味です。 このブログはソフトウェア開発関係の内容を記事にしています。
web service:
GitHubQiitaTwitterはてなブログ
handle name:
nasust
real name:
hideki mori
job:
ソフトウェアエンジニア
develop:
target: ios, android, web page, single page application, api server, system service, cli tool, linux embedded device

lang: c/c++, go, swift, objective-c, java, kotlin, typescript, dart, javascript, ruby, python, php

tool: vscode, xcode, android studio, photoshop, vim, docker