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
設定の変更を反映するために、Jekyllをリスタートします。
出力したページへのリンクは、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.ymlでfront 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を開き、スタッフページやポストの著者のリンクが、きちんと機能していることを確認しましょう。
次はこのチュートリアルの最後のステップです。サイトに磨きをかけ、作品の配備の準備をします。