ブログにグラフを表示したい。
解決策
Plotlyという、グラフ描画用のJavaScriptライブラリを使用する。
今回は、Hugoのrender_hooksを利用し、以下のコードブロックでグラフを表示できるようにする。
Plotlyは出力先の<div/>とグラフを定義したJavaScriptの2つを記載する必要がある。
そのため、不恰好だけど、<div/>と<script/>をそのままコードブロックに記載することにする。1 2
```plotly
<div id="out1"></div>
<script>
Plotly.newPlot("out1", [{
x: [10, 50, 100],
y: [30, 150, 300]
}], {}, {responsive: true});
</script>
```
- 出力例
render_hooksの内容
themes/kantas/layouts/_default/_markup/render-codeblock-plotly.htmlを作成し、以下を記載する。
<div class="plotly">
{{- .Inner | safeHTML }}
</div>
themes/kantas/layouts/_default/baseof.htmlに、以下を記載し、Plotlyのコードブロックを呼び出し時に、Plotlyのライブラリを読み込むようにする。
<html>
<!-- 略 -->
<head>
<!-- 略 -->
{{ if .Page.Params.usePlotly }}
<script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>
{{ end }}
<!-- 略 -->
</head>
<body/>
</html>