分步教程
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,查看人员页面和文章上的作者链接,以检查所有内容是否正确链接。
在本教程的下一步也是最后一步中,我们将为网站添加润色,并使其准备好进行生产部署。