HugoのData Templatesで、Table作成
縦横変換、行列入れ替え、Pivot Tableなど、どれが正しい言葉なのか、わかりません。
使用環境
| Name | Version |
|---|---|
| Hugo | v0.92.1-extended |
| Vanilla Framework | 3.0.1 |
content ディレクトリ
. ├── _index.md ├── header&footer.md ├── horizontal.md └── small.md
data ディレクトリ
下記のようなデータがあったとします。
data/bootstrap.yaml
--- Header & footer: "○" Horizontal: "○" Small: "○"
data/bulma.yaml
--- Header & footer: "○" Horizontal: "×" Small: "×"
data/uikit.yaml
--- Header & footer: "○" Horizontal: "○" Small: "○"
でも、実際に表示したいのは、下記の図だったとします。*1
そうすると、数行分のデータを、１つの列に置き換える作業が必要となります。
例えば、Laravelだと、Arr::pluckを使って処理したことがあります。
Hugoで、試してみました。
たぶん、もっと良いやり方があるはずですが、下記のようにしています。*2
<tbody> {{ range .Site.Home.RegularPages.ByTitle }} {{ $title := .Title }} <tr> <td class="u-align--center">{{ $title }}</td> {{ range $rows := $.Site.Data }} {{ range $key, $value := $rows }} {{ if eq $title $key }} <td class="u-align--center"> {{ if eq $value "○" }} <i class="bx bx-check bx-sm"></i> {{ end }} </td> {{ end }} {{ end }} {{ end }} </tr> {{ end }} </tbody>
ルール
後出しジャンケンみたいになりますが、下記のようなルール（仕様）を想定して作りました。
