February 17, 2016

Hugo shortcodeでCSVをtableに出力する

Hugoではmarkdownの文法をshortcodeという仕組みを使って比較的自由に拡張することができます。既定のshortcodeとしては、youtube, twitter, figureなどがあり、以下のように使用できます

https://gohugo.io/extras/shortcodes/

{{< figure src="/media/spf13.jpg" title="Steve Francia" >}}
{{< youtube w7Ft2ymGmfc >}}
{{< tweet 666616452582129664 >}}

この仕組みを使うことで、csvファイルのパスを渡し、tableタグの表に変換することができそうです。

<table>
  <tbody>
  {{ with .Get "src" }}
    {{ range $i, $r := getCSV "," . }}
    <tr>
      {{ if eq $i 0}} {{range $r}}  <th> {{ . }} </th>{{ end }}
      {{ else }} {{range $r}}  <td> {{ . }} </td>{{ end }}
      {{ end }}
    </tr>
    {{ end }}
  {{ end }}
  </tbody>
</table>
このようにlayout/shortcodesフォルダ内にshortcodeを用意しておき、markdown文書では次のように記載し、csvのパスを指定して呼び出します。

{{ <csv src="/static/csv/data.csv"> }}
テンプレートを使った方法と比べると柔軟にデータを表示できる点で使い道が広がりそうです。shortcodeはパラメータを好きな数だけ与えて、自由にhtmlでデザインしたコードを出力できるため、文書中に他のwebサービスを埋め込みたい場合にも活躍してくれそうですね。例えば、csvファイルやJSONを渡してグラフを描画するといったことも可能でしょう(この場合は、ローカルのデータをHugoにハードコードさせて、それをクライアントサイドでJavaScript等でグラフにするか、shortcodeでグラフの作成まですべてやってしまうか、手法は色々とありえます。)

No comments :

Post a Comment