11ty - 如何在我的 post.njk 文件中显示帖子标签？

Question

我已经使用了 11ty/eleventy-base-blog 模板并且运行良好 - 但我正在尝试在我的 post.njk 文件中很好地显示标签。

在我的帖子 (.md) 文件的顶部，我有这个：

tags: ['Tag 1', 'Tag 2']

在 _includes/layouts/postslist.njk 我使用以下代码：

{% for tag in post.data.tags %}
  {%- if collections.tagList.indexOf(tag) != -1 -%}
  {% set tagUrl %}/tags/{{ tag }}/{% endset %}
    <span class="tag">{{ tag }}</span>
  {%- endif -%}
{% endfor %}

然后使用此代码在 index.njk 文件（我的主页）中使用此模板：

{% set postslist = collections.posts | head(-3) %}
{% set postslistCounter = collections.posts | length %}
{% include "postslist.njk" %}

这个的输出是：

<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>

但是，如果我在 post.njk 文件中使用 {{ tags }}，我会得到以下输出：

posts,Tag 1,Tag 2

我也尝试使用“postslist.njk”文件中的相同代码并将其放入“post.njk”文件中，但这不起作用。

如何在单独的“span”标签中显示帖子上的标签并删除“posts”标签？

如果你想让我打开我的 git 仓库，请告诉我。

谢谢！

Answer 1

为什么你的标签中有posts标签？

在您使用的入门模板 (11ty/eleventy-base-blog) 中，posts/ 目录包含一个 directory data file (posts.json)，它也适用于该目录中的所有文件，即适用于所有帖子。由于.eleventy.js config file 使用Data Deep Merge option，因此您在每个帖子中设置的标签将与posts 标签合并。这就是为什么你的帖子的标签是['posts', 'Tag 1', 'Tag 2']。

您可以通过多种方式解决此问题。要么使用两个不同的 frontmatter 字段进行收集和显示，要么在显示帖子标签时过滤掉 posts 标签。

如何输出标签列表？

如果你只是做{{ tags }}，你是在告诉 Nunjucks 输出一个数组，所以它必须弄清楚如何将数组转换为字符串。显然，这种情况下的默认行为是简单地用逗号连接它们。您可以使其更明确（并在逗号后包含一个空格）：

{{ posts | join(', ') }}

或者，如果您想将项目包装在 HTML 标记中，您可以使用循环，也可以使用 joiner：

{% set comma = joiner() %}
{% for tag in tags -%}
  {% if tag !== 'posts' %}
    {{ comma() }} <span class="tag">{{ tag }}</span>
  {% endif %}
{%- endfor %}