如何在11ty base blog启动模板中实现首页精选文章展示？

步骤1：添加featured标签集合配置 #

11ty默认不会自动生成按自定义标签筛选的集合，你需要在站点根目录的eleventy.config.js（旧版本为.eleventy.js）配置文件中添加如下代码，手动生成featured集合：

module.exports = function(eleventyConfig) {
  // 其他现有配置保持不变
  eleventyConfig.addCollection("featured", function(collectionApi) {
    // 筛选所有带featured标签的内容，按发布时间倒序
    return collectionApi.getFilteredByTag("featured").reverse();
  });
}

步骤2：修正模板调用逻辑 #

你当前使用的postslist.njk模板默认接收完整的文章数组变量posts，内部已实现遍历逻辑，不需要在外部单独循环。将你首页的调用代码替换为以下内容即可：

{% include 'postslist.njk' with { posts: collections.featured } %}

如果你坚持要在外部循环，需要将postslist.njk修改为适配单个文章渲染的逻辑，或者改用单篇文章的模板片段进行引入。

步骤3：确认文章标签配置正确 #

检查你标记为精选的文章Front Matter中标签格式符合要求，大小写完全匹配：

---
title: 示例精选文章
date: 2024-05-20
tags:
  - featured
  - 其他自定义标签
---

不要将标签写为字符串格式tags: featured，否则会被识别为单个字符串无法匹配筛选规则。

可选排查项 #

如果配置完成后仍未生效，删除站点根目录下的.11ty缓存文件夹，重启本地开发服务即可。

内容的提问来源于stack exchange，提问作者Zemo