。
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