逆引きマニュアル: Hugo: CSVを表(テーブル)に変換する方法

投稿日: 2018-09-09

Hugo

CSV

やりたいこと

Hugoで、CSVファイルをテーブルに埋め込めるようにする方法です。

前提条件

Hugo 0.45.1で確認しています。

概要

概要がData Templatesに記載されています。

手順

ショートコードを作成します。 Data Templatesに書かれている方法でもいいのですが、自分はこのように作成しました。

1行目がヘッダで<th>となるように出力
列の数に関係なく使用可能

<table>
{{- $url := .Get "url" }}
{{- range $i, $r := getCSV "," $url }}
{{- $col := $r }}
  <tr>
    {{- if (eq $i 0) }}
      {{- range $r }}
      <th>{{ . }}</th>
      {{- end }}
    {{- else }}
      {{- range $r }}
      <td>{{ . }}</td>
      {{- end }}
    {{- end }}
  </tr>
{{- end }}
</table>

CSVファイルはstaticディレクトリに置いています。そして、以下のように記載します。

計測日	商品名	重さ(g)	備考
2018-05-11	ミディオ	614
2018-05-11	ノーブランド	703	3本でこの重さ。やたら大きかった。
2018-05-12	Will	575
2018-05-17	ミディオ	696
2018-05-18	元気バナナ(コープ)	717	緩衝材込みの重さ。
2018-05-21	ボビーバナナ	492
2018-05-23	ミディオ	650
2018-05-23	ミディオ	614
2018-05-26	元気バナナ(コープ)	816
2018-05-29	デルモンテ	572
2018-06-01	ミディオ	660
2018-06-01	元気バナナ(コープ)	678
2018-06-01	味甘	544
2018-06-04	天空のバナナ	693
2018-06-08	ミディオ	654
2018-06-08	ボビーバナナ	508
2018-06-08	ファン・バナーナ	633
2018-06-15	ボビーバナナ	488
2018-06-16	朝のしあわせバナナ	416
2018-06-16	スウィーティオ	738
2018-06-22	ミディオ	677
2018-06-22	ボビーバナナ	509
2018-06-26	元気バナナ(コープ)	605
2018-06-26	ボビーバナナ	601
2018-06-29	チキータ	472
2018-06-29	チキータ	496
2018-07-01	元気バナナ(コープ)	644	緩衝材込みの重さ。
2018-07-01	朝のしあわせバナナ	623
2018-07-04	プレシャス	772
2018-07-12	ミディオ	620
2018-07-12	ミディオ	640
2018-07-14	ノーブランド	617
2018-07-14	天空のバナナ	759
2018-07-17	デルモンテ	567
2018-07-24	極王	584
2018-07-25	極王	698
2018-07-29	ミディオ	630
2018-08-02	極王	603
2018-08-02	ミディオ	675
2018-08-16	天空のバナナ	639
2018-08-16	ミディオ	689
2018-08-16	ミディオ	640

補足

マニュアル

Hugo
CSV