HugoをChart.jsに対応させてみる

2021/01/02 categories:Hugo| tags:Hugo, Chart.js|

Hugoで作成したホームページでChart.jsを使えるようにしてみました。

フロントマターにchartjsというキーを追加

記事を記述するマークダウンファイルのフロントマター部分にchartjsというキーを書いて、その値がtrueの場合にchart.jsを読み込むという判定をすることにしました。具体的には下記のような記述としました。

---
chartjs: true
---

フロントマターにjavascriptsというキーを追加

記事を記述するマークダウンファイルのフロントマター部分にjavascriptsというキーを書き、その値にjavascriptのパスの配列を記述するして、それらのパスのjavascriptを読み込むような処理にしました。具体的には下記のような記述としました。

---
javascripts: ["js/post/hugo-chartjs.js"]
---

hugo-chartjs.jsにはChart.jsのグラフ描画の処理を記述します。具体的には、

var myChart = new Chart();

といった内容を書きますが、この部分はChart.jsの書き方を調べてください。

chartjs用のキャンバスを記述するショートコードの作成

hugoのフォルダ内のlayouts/shortcodesにchart-js-canvas.htmlというショートコード用のファイルを作成しました。そのファイルの内容は下記の通りです。

<div>
    <canvas id="{{ .Get 0 }}"></canvas>
</div>

上記のショートコードはchart.jsを使いたい記事内で下記のように記述して、最初の引数としてcanvasのidを指定するようにしました。ちなみにhugoがショートコードだと認識してしまうので、下記のコードは不等号を全角にしています。実際の記述は半角にする必要があります。

{{＜ chart-js-canvas "myChart" ＞}}

上記のスクリプトを読み込む設定をlayouts/partials/footer.htmlに追加します。

{{- if .Params.chartjs -}}
<script src="/js/Chart.min.js"></script>
{{- end }}
{{ if .Params.javascripts -}}{{- range .Params.javascripts -}}<script src="{{ .  | absURL }}"></script>{{- end -}}{{- end -}}

{{- if .Params.chartjs -}} ～ {{- end }}がフロントマターにchartjsがtrueの場合にhtmlファイルに記述する処理で、"/js/Chart.min.js"を読み込むという内容です。

{{ if .Params.javascripts -}} ～ {{- end }}がフロントマターにjavascriptsがある場合にhtmlファイルに記述する処理です。

{{- range .Params.javascripts -}} ～ {{- end }}がフロントマターのjavascriptsに記述した配列をループして、src="{{ . | absURL }}“で読み込むファイルのパスを指定しています。

hugoでChart.jsを散布図を描画した例

hugoでのChart.jsの描画例は下記のとおりです。