Jekyll

Jekyll でCSVファイルを読み込んでHTMLとして表示

More than 1 year has passed since last update.


仕様


  • 定型のフォーマットで繰り返されるデータがあるのでいい感じにループ回したい

  • コピペでもHTMLタグなんて書きたくない

  • 元データ更新すればいいだけにしたい

https://jaws-ug.jp/previous-events/

screencapture-jaws-ug-jp-previous-events-1510140382998.png

赤枠のところで、URL,イベント名,日付、バナーのセットをループで回します。


ソース

https://jekyllrb.com/docs/datafiles/

Jekyll では _data に入れた YAML, JSON, CSV を変数(オブジェクト)として読み込む機能があります。

今回はCSVで実装してます

用意したCSV


_data/sample.csv

name,url,cover,date

JAWS DAYS 2013,http://jawsdays2013.jaws-ug.jp/,jawsdays2013.png,2013.3.15-16
JAWS DAYS 2014,http://jawsdays2014.jaws-ug.jp/,jawsdays2014.png,2014.3.15

Jekyllでの書き方


events.html

{% for event in site.data.events %}

<div class="previous-event">
{% if event.name != 'blank' %}
<a href="{{event.url}}" target="_blank">
{% if event.cover %}<img src="{{ site.baseurl }}/assets/images/site-cover/{{event.cover}}" alt="{{event.name}}"><br>{% endif %}
{{event.name}}
{% if event.date %} at {{event.date}}{% endif %}
</a>
{% endif %}
</div>
{% endfor %}

画像は特定のディレクトリに入れてファイル名のみをCSVに記述する形にしたので、画像のパスはテンプレート側で補完してます。

現場からは以上です。