ステップバイステップチュートリアル

6. データファイル

Jekyllは_dataディレクトリにあるYAML、JSON、CSVファイルからデータを読み込みます。データファイルはコンテンツをソースコードから分離してサイトのメンテナンスを簡単にする優れた方法です。

このステップでは、ナビゲーションのコンテンツをデータファイルに保存し、ナビゲーションのインクルードで反復処理します。

データファイルの使用方法

YAMLは、Rubyエコシステムで一般的な形式です。ナビゲーション項目の配列を格納するために使用します。各項目には名前とリンクがあります。

_data/navigation.ymlにナビゲーション用のデータファイルを作成し、以下を追加します

- name: Home
  link: /
- name: About
  link: /about.html

Jekyllによりこのデータファイルがsite.data.navigationで利用できるようになります。_includes/navigation.htmlで各リンクを出力する代わりに、代わりにデータファイルで反復処理できるようになりました

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if page.url == item.link %}style="color: red;"{% endif %}>
      {{ item.name }}
    </a>
  {% endfor %}
</nav>

出力はまったく同じになります。違いは、新しいナビゲーション項目を追加したり、HTML構造を変更したりするのが簡単になったことです。

CSS、JS、画像がないサイトに何の意味があるでしょうか? Jekyllで資産を扱う方法を見てみましょう。

戻る