Step by Step チュートリアル

9. コレクション

著者について肉付けするため、各著者の紹介と公開したポストのページを準備しましょう。

それを行うために、コレクションを使用します。コレクションはポストによく似ていますが、日付でグループ化されない点が異なります。

設定

コレクションをセットアップするために、Jekyllに教える必要があります。(デフォルトでは)Jekyllの設定は_config.ymlというファイルで行います。

以下の内容で_config.ymlを作成します。

collections:
  authors:

設定ファイルを(再)読み込みするために、Jekyllサーバーをリスタートします。ターミナルで、Ctrl+Cを押しサーバーを止めてから、jekyll serveで再起動します。

著者を追加する

ドキュメント(コレクションのアイテム)は、サイトのrootの_*collection_name*に入れます。今回の場合は、_authorsです。

各著者のドキュメントを作成します。

_authors/jill.md:

---
short_name: jill
name: Jill Smith
position: Chief Editor
---
Jill is an avid fruit grower based in the south of France.

_authors/ted.md:

---
short_name: ted
name: Ted Doe
position: Writer
---
Ted has been eating fruit since he was baby.

スタッフページ

サイトの全著者のリストのページを追加しましょう。Jekyllはsite.authorsでコレクションを利用可能にします。

staff.htmlを作り、site.authorsを繰り返し処理して全てのスタッフを出力します。

---
layout: default
title: Staff
---
<h1>Staff</h1>

<ul>
  {% for author in site.authors %}
    <li>
      <h2>{{ author.name }}</h2>
      <h3>{{ author.position }}</h3>
      <p>{{ author.content | markdownify }}</p>
    </li>
  {% endfor %}
</ul>

contentはmarkdownで書かれていますので、markdownifyフィルタを通す必要があります。レイアウトで{{ content }}を使用するときは、自動で行われています。

また、メインナビゲーションでこのページに移動できるようにしましょう。_data/navigation.ymlを開き、スタッフページの記述を追加しましょう。

- name: Home
  link: /
- name: About
  link: /about.html
- name: Blog
  link: /blog.html
- name: Staff
  link: /staff.html

ページの出力

デフォルトでは、コレクションはドキュメントのページを出力しません。今回の場合、各著者のページが必要ですので、コレクションの設定を修正します。

_config.ymlを開き、authorコレクションの設定にoutput: trueを追加します。

collections:
  authors:
    output: true

出力したページへのリンクは、author.urlを使用して行えます。

staff.htmlページにリンクを追加します。

---
layout: default
title: Staff
---
<h1>Staff</h1>

<ul>
  {% for author in site.authors %}
    <li>
      <h2><a href="{{ author.url }}">{{ author.name }}</a></h2>
      <h3>{{ author.position }}</h3>
      <p>{{ author.content | markdownify }}</p>
    </li>
  {% endfor %}
</ul>

ポストと同じように、著者のレイアウトを作成する必要があります。

以下の内容で_layouts/author.htmlを作成します。

---
layout: default
---
<h1>{{ page.name }}</h1>
<h2>{{ page.position }}</h2>

{{ content }}

front matterのデフォルト値

次は、著者のドキュメントにauthorレイアウトを設定する必要があります。これまでやったように、front matterで設定することができますが、それでは何度も同じ操作が必要です。

自動でポストはpostレイアウト、著者のページにはauthorレイアウト、その他のページはdefaultレイアウトになるといいですよね。

_config.ymlfront matter defaultsを使用すれば、できます。デフォルトをscopeに当てはめて、望むfront matterのデフォルト値を設定します。

実際に_config.ymlにレイアウトのデフォルト値を追加してみましょう。

collections:
  authors:
    output: true

defaults:
  - scope:
      path: ""
      type: "authors"
    values:
      layout: "author"
  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
  - scope:
      path: ""
    values:
      layout: "default"

これで、全てのページやポストのfront matterからレイアウトの指定を省くことができます。_config.ymlを更新した場合は、変更を反映するためにJekyllを再起動する必要があります。

著者の投稿のリスト

著者のページに公開したポストをリストアップしてみましょう。これには、著者のshort_nameとポストのauthorを一致させる必要があります。ポストをauthorでフィルタすることで行うことができます。

著者のポストを出力するために、_layouts/author.htmlのフィルタをかけたリストの繰り返し処理を行います。

---
layout: default
---
<h1>{{ page.name }}</h1>
<h2>{{ page.position }}</h2>

{{ content }}

<h2>Posts</h2>
<ul>
  {% assign filtered_posts = site.posts | where: 'author', page.short_name %}
  {% for post in filtered_posts %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
</ul>

著者ページへのリンク

ポストでは著者を参照していますので、著者のページへのリンクを貼りましょう。_layouts/post.htmlで、先ほどとよく似たフィルタのテクニックを使います。

---
layout: default
---
<h1>{{ page.title }}</h1>

<p>
  {{ page.date | date_to_string }}
  {% assign author = site.authors | where: 'short_name', page.author | first %}
  {% if author %}
    - <a href="{{ author.url }}">{{ author.name }}</a>
  {% endif %}
</p>

{{ content }}

http://localhost:4000を開き、スタッフページやポストの著者のリンクが、きちんと機能していることを確認しましょう。

次はこのチュートリアルの最後のステップです。サイトに磨きをかけ、作品の配備の準備をします。

  1. セットアップ
  2. Liquid
  3. Front Matter
  4. レイアウト
  5. Includes(インクルード)
  6. Dataファイル
  7. Assets
  8. ブログ
  9. コレクション
  10. Deployment