Step by Step チュートリアル

6. Dataファイル

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でAssetsを処理する方法を見てみましょう。

Back