0

在我的网站上，我想在与每个集合对应的页面上显示集合项目列表。例如在游戏页面上，我想显示所有游戏相关文章的列表，在政治页面上，我想显示所有政治相关文章的列表等。

我现在拥有的是每个这样的页面都有一个 Nunjucks 模板文件，我不是特别喜欢它，因为除了要显示的集合之外它们是相同的。这是我的两个模板，用于政治文章和游戏文章，我在其中扩展了一个通用样板 ( base.njk )，在主块中，我首先打印一些 Markdown 内容，然后是集合项目列表：

{# politics.njk #}

{% extends "base.njk" %}

{% block main %}
<main>
    {{ content | safe }}
    <ul class="postlist no-bullets">
        {% for item in collections.politics %}
            {% include "partials/collection-list-item.njk" %}
        {% endfor %}
    </ul>
</main>
{% endblock %}

{# games.njk #}

{% extends "base.njk" %}

{% block main %}
<main>
    {{ content | safe }}
    <ul class="postlist no-bullets">
        {% for item in collections.games %}
            {% include "partials/collection-list-item.njk" %}
        {% endfor %}
    </ul>
</main>
{% endblock %}

如您所见，这两个文件之间的唯一区别是collections.politics和collections.games. 我想使用一个模板，并在 frontmatter 中指定我想要的集合。由于我已经在每页使用该模板（用于在我开始列出文章之前编写内容）拥有一个 Markdown 文件，如果可能的话，那就太好了。例如：

<!-- politics.md -->
---
layout: articles-list.njk
title: Politics
listCollection: collections.politics
---
# Politics
Below is a list of all politics articles I've written.

<!-- games.md -->
---
layout: articles-list.njk
title: Games
listCollection: collections.games
---
# Games
I think about games a lot. Below is a list of articles I've written on the topic.

{# articles-list.njk #}

{% extends "base.njk" %}

{% block main %}
<main>
    {{ content | safe }}
    <ul class="postlist no-bullets">
        {% for item in listCollection %}
            {% include "partials/collection-list-item.njk" %}
        {% endfor %}
    </ul>
</main>
{% endblock %}

除了拥有多个模板文件之外，是否可以通过其他方式做我想做的事情？

4

2 回答 2

2

您可能可以使用计算数据访问该集合，但我不确定您是否可以访问那里的集合。

一种更简单的方法：将您的 frontmatter 字段设置为要显示为字符串的集合的名称，然后使用它来获取模板中的集合：

<!-- politics.md -->
---
layout: articles-list.njk
title: Politics
listCollection: 'politics'
---

{# articles-list.njk #}

{% extends "base.njk" %}

{% block main %}
<main>
    {{ content | safe }}
    <ul class="postlist no-bullets">
        {% for item in collections[listCollection] %}
            {% include "partials/collection-list-item.njk" %}
        {% endfor %}
    </ul>
</main>
{% endblock %}
于 2021-05-06T08:18:49.513 回答
1

我在我的博客（https://github.com/cfjedimaster/raymondcamden2020）上处理这个问题的方式是这样的：

  1. 我创建了我的类别的集合。我通过使用.eleventy.js 和leventyConfig.addCollection 来做到这一点。我使用一些 JavaScript 来获取我的所有帖子，遍历每个类别列表，并创建一个唯一列表。最后，我有一个名为类别的集合。
  eleventyConfig.addCollection("categories", collection => {
    let cats = new Set();
        let posts = collection.getFilteredByGlob("_posts/**/*.md");
        for(let i=0;i<posts.length;i++) {
      for(let x=0;x<posts[i].data.categories.length;x++) {
        cats.add(posts[i].data.categories[x].toLowerCase());
      }
        }

        return Array.from(cats).sort();
    });
  1. 然后我制作了一个页面，categories.liquid，它负责生成我的类别页面。这很简单：
---
pagination:
    data: collections.categories
    size: 1
    alias: cat
permalink: "categories/{{ cat | myEscape }}/"
layout: category
renderData:
    title: "{{ cat }}"
---

请注意，我cat用于类别中的每个项目，并注意我这里没有其他内容。所有布局都在类别布局页面中完成。

  1. 这是我的类别页面的顶部：
---
layout: default
---

{% assign posts = collections.posts | getByCategory: cat %}

因此，鉴于我有一个帖子集合，其中每个帖子都分配了 N 个类别，我编写了一个自定义过滤器，将其简化为具有cat其中一个类别的帖子。

S 最终结果是 N 个类别的页面填充了分配给该类别的帖子。

于 2021-05-06T22:05:00.593 回答