在 Jekyll 中创建带有导航的博客文章系列

Person drinking a hat drink at the computer

图片来自

撰写关于独立自主的想法的博客很棒。但是，有些想法需要更结构化的方法。将简单的概念组合成一个大的整体对于作者和读者来说都是一次奇妙的旅程，因此我想在我的 Jekyll 博客中添加一个系列功能。正如您可能已经猜到的那样，Jekyll 的高度自定义性使这变得轻而易举。

目标

我想实现以下目标

每篇文章应列出同一系列中的其他文章。
为了简化内容发现，主页应显示类别中的所有系列。
将文章移动到不同的系列应该很容易，因为它们可能会随着时间的推移而演变。

步骤 1：将系列元数据添加到帖子

鉴于 Jekyll 的高度可定制性，有很多方法可以处理系列。我可以在配置中利用 Jekyll 变量来保留系列列表，使用集合，或者在全局模板中的某个位置定义一个 Liquid 列表并对其进行迭代。

最干净的方法是列出系列以及该系列中包含的帖子。例如，对于 Jekyll 系列中的所有帖子，我在帖子前端添加了以下两个变量

is_series: true
series_title: "Jekyll"

第一个变量 is_series 是一个简单的布尔值，用于说明此帖子是否为系列的一部分。布尔值与 Liquid 过滤器配合使用效果很好，并且允许我仅过滤那些属于系列一部分的帖子。这在稍后我尝试一次列出所有系列时会派上用场。

第二个变量 series_title 是此系列的标题。在这种情况下，它是Jekyll。同一系列中的帖子包含相同的标题非常重要。我将使用此标题将帖子与系列匹配。如果它包含额外的空格或特殊字符，它将无法匹配该系列。

您可以在此处查看源代码。

我们最喜欢的关于开源的资源

步骤 2：添加帖子链接

定义了系列后，我现在需要显示该系列中的其他文章。如果我在 Jekyll 系列中看到一篇帖子，则应该有同一系列中其他文章的列表。没有此基本导航，系列就毫无意义。

我的博客使用 posts layout 来显示帖子。为了显示与当前查看的帖子相同的系列中的其他帖子，我使用以下代码

<!-- Series links -->
{% if page.is_series == true %}
<h3 class="text-success p-3 pb-0">{{ page.series_title | upcase }} series</h3>
{% assign posts = site.posts | where: "is_series", true | where: "series_title", page.series_title | sort: 'date' %}
 
{% for post in posts %}
        {% if post.title == page.title %}
 <p class="nav-link bullet-pointer mb-0">{{ post.title }}</p>
        {% else %}
 <a class="nav-link bullet-hash" href="https://open-source.net.cn/%7B%7B%20post.url%20%7D%7D">{{ post.title }}</a>
        {% endif %}
{% endfor %}

{% endif %}{% endraw %}

上面的逻辑如下

检查当前页面的 is_series 布尔值是否为 true，这意味着该帖子是系列的一部分。
获取 is_series 为 true 且 series_title 是当前 series_title 的帖子。按升序日期排序。
显示指向该系列中其他帖子的链接，如果列表项是当前帖子，则显示不可点击的 span。

为了清楚起见，我删除了一些 HTML，但是您可以在此处查看完整的源代码。

步骤 3：将每个系列的链接添加到主页

我现在有了显示指向同一系列中其他帖子的链接的帖子页面。接下来，我想在主页上的类别下将导航选项添加到所有系列。

例如，“技术”部分应在主页上显示“技术”系列中的所有系列。生命事物、视频游戏和 META 类别也是如此。这使用户可以更轻松地查找和阅读完整的系列。

<!-- Series posts -->
{% assign series = "" | split: "," %}
{% assign series_post = "" | split: "," %}
{% assign posts = site.posts | where:"Category", cat.title | where: "is_series",true | sort: 'date' %}

{% for post in posts %}
{% unless series contains post.series_title %}
{% assign series = series | push: post.series_title %}
{% assign series_post = series_post | push: post %}
{% endunless %}
{% endfor %}

{% if series.size > 0 %}
<div class="row m-1 row-cols-1 row-cols-md-4 g-3 align-items-center">
 <div class="col">
 <span class="h3 text-success">Article series →</span>
 </div>
    {% for post in series_post %}
        {% include card-link.html url=post.url title=post.series_title %}
    {% endfor %}
</div>
{% endif %}
{% endfor %}{% endraw %}

为了识别特定类别的所有系列，我使用上面的代码，该代码完成以下操作

初始化两个变量：一个用于系列名称，另一个用于每个系列的第一个帖子。
获取所有将 is_series 设置为 true 且属于当前类别的帖子。
将 series_title 添加到系列名称数组，并将第一个帖子添加到系列帖子数组。
显示系列的名称，该名称链接到该系列中的第一个帖子。

您可以在此处找到完整的源代码。

为什么我喜欢使用 Jekyll 进行博客写作

Jekyll 的高度自定义性是我如此喜欢使用它的原因。这也是我博客的底层 Jekyll 引擎在重新设计和重构后仍然存在的原因。 Jekyll 可以轻松地将动态逻辑添加到原本静态的网站中。虽然我的网站仍然是静态的，但渲染它的逻辑不必是。

您可以对我今天向您展示的内容进行许多改进。

我正在考虑的一项改进是处理系列帖子排序。例如，系列中的帖子当前按其发布日期的升序显示。我已经发布了属于一个系列的多篇帖子，这些帖子是在不同的时间发布的，因此我可以添加一个 series_order 键，并使用它来按主题而不是按发布日期对文章进行排序。这是您可以构建自己的系列功能的众多方法之一。

祝您编码愉快：)

本文最初出现在作者的博客上，并已获得许可转载。

接下来要阅读什么