javascript - Eleventy 站点如何显示目录中的页面列表？

Question

我正在设置一个新的 Eleventy网站，我遇到了一个小障碍。我的页面被组织成子目录。我希望每个目录的索引页列出该目录中的所有页面。

例如:

|--section1
|  |--index.njk // this should list /section1/page1/, /section2/page2/, etc.
|  |--page1.md
|  |--page2.md
|   --(etc...)
|--section2
|  |--index.njk // this should list /section2/page1/, etc.
|  |--page1.md
|   --(etc..)

Eleventy 的 collections 似乎提供了与此类似的功能特征。但是，集合似乎只使用标签中提供的数据。

我可以通过在每个 page.md 的前面指定 tags: ["section1"] 来获得我想要的输出。但是，这意味着需要维护更多冗余元数据。

看起来我也可以使用 eleventyConfig.addCollection 函数生成我需要的集合，该函数将对 collections.all() 进行排序并返回基于在他们的 outputPath 上。但这对我来说感觉很老套，我想知道是否有更优雅的解决方案。

理想情况下，我希望能够在我的 index.njk 模板中放入这样的内容:

{%- for page in directory -%}
{# do stuff #}
{%- endfor -%}

或者也许

{%- for page in collections.directory -%}
{# do stuff #}
{%- endfor -%}

有什么我想念的吗？

Answer 1

我想通了。

您可以添加 data file to each directory并将目录名称添加为标签。

例如，section1/section1.json 将包含:

{
    "tags": ["Section 1"]
}

这将应用于该目录中的所有页面。 但是，在各个页面中指定的任何标记都会覆盖它。您必须启用 data deep merge合并目录和页面标签的功能。只需将 eleventyConfig.setDataDeepMerge(true); 添加到您的 .eleventy.js 配置文件。

文档指出此功能将在未来版本中默认启用。在撰写本文时，它仍然只是选择加入。