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

2298 ワード
Jekyll Jekyll テキストリンク

仕様

  • 定型のフォーマットで繰り返されるデータがあるのでいい感じにループ回したい
  • コピペでもHTMLタグなんて書きたくない
  • 元データ更新すればいいだけにしたい

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

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

ソース

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に記述する形にしたので、画像のパスはテンプレート側で補完してます。

現場からは以上です。