逐步教學

9. 集合

讓我們看看如何充實作者，讓每個作者都有自己的頁面，包含簡介和他們發布的文章。

要做到這一點，你將使用集合。集合類似於文章，但內容不必按日期分組。

設定

要設定集合，你需要告訴 Jekyll。Jekyll 設定會在一個名為 _config.yml 的檔案中進行（預設）。

在根目錄中建立 _config.yml，內容如下

collections:
  authors:

要（重新）載入設定，請重新啟動 jekyll 伺服器。在你的終端機中按 Ctrl+C 來停止伺服器，然後 jekyll serve 來重新啟動它。

新增作者

文件（集合中的項目）位於網站根目錄中名為 _*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>

由於內容是 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 中使用 front matter 預設值來達成此目的。設定預設值套用的範圍，然後設定您想要的預設 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 相符。您可以使用此方法依作者篩選文章。

在 _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，看看員工頁面和文章上的作者連結，以檢查所有內容是否正確連結在一起。

在本教學課程的下一步也是最後一步中，我們將為網站增添美感，並讓它準備好進行生產部署。

上一步

下一步