逆引きマニュアル: 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

補足

マニュアル