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

9. コレクション

各著者に、自己紹介と公開済みの投稿を含む独自のページを持たせる方法を見てみましょう。

これを行うには、コレクションを使用します。コレクションは投稿に似ていますが、コンテンツを日付でグループ化する必要はありません。

設定

コレクションを設定するには、Jekyllにそれを知らせる必要があります。 Jekyllの設定は、（デフォルトでは）_config.ymlというファイルで行われます。

ルートに以下の内容で_config.ymlを作成します

collections:
  authors:

設定を（再）読み込みするには、jekyllサーバーを再起動します。ターミナルでCtrl+Cを押してサーバーを停止し、jekyll serveで再起動します。

著者を追加する

ドキュメント（コレクション内のアイテム）は、サイトのルートにある_*コレクション名*という名前のフォルダに配置されます。この場合は、_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>

コンテンツは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を開き、著者コレクションの設定に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 }}

フロントマターのデフォルト

ここで、authorレイアウトを使用するようにオーサードキュメントを設定する必要があります。以前のようにフロントマターでこれを行うこともできますが、それは繰り返しになります。

本当にやりたいことは、すべての投稿に自動的に投稿レイアウトを適用し、著者に著者レイアウトを適用し、その他すべてにデフォルトのレイアウトを使用することです。

これは、_config.ymlでフロントマターのデフォルトを使用することで実現できます。デフォルトが適用されるスコープと、デフォルトのフロントマターを設定します。

_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"

これで、すべてのページと投稿のフロントマターからレイアウトを削除できます。 _config.ymlを更新するたびに、変更を有効にするためにJekyllを再起動する必要があることに注意してください。

著者の投稿を一覧表示する

著者のページに、その著者が公開した投稿を一覧表示しましょう。これを行うには、著者のshort_nameを投稿の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を開き、スタッフページと投稿の著者リンクを見て、すべてが正しくリンクされていることを確認します。

このチュートリアルの最後の手順では、サイトに磨きをかけ、本番環境へのデプロイの準備を整えます。

戻る