分步教程

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 中使用 前端默认值 来实现此目的。你设置默认值适用的范围,然后设置你想要的前端默认值。

将布局的默认值添加到 _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,查看人员页面和文章上的作者链接,以检查所有内容是否正确链接。

在本教程的下一步也是最后一步中,我们将为网站添加润色,并使其准备好进行生产部署。

  1. 设置
  2. Liquid
  3. 前端信息
  4. 布局
  5. 包含
  6. 数据文件
  7. 资源
  8. 博客
  9. 集合
  10. 部署