如何在Eleventy中用Nunjucks仅展示近30天的文章？

一、在Eleventy配置文件中添加筛选逻辑 #

找到项目根目录下的.eleventy.js文件，把下面的代码粘贴进去（如果文件里已有其他配置，就把过滤器部分加到module.exports函数里）：

module.exports = function(eleventyConfig) {
  // 新增过滤器：筛选近30天内的文章
  eleventyConfig.addFilter("last30Days", function(posts) {
    // 计算30天前的日期
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);

    // 过滤集合中的文章
    return posts.filter(post => {
      // 这里的post.date是文章front matter里的日期字段，如果你用的是其他字段（比如published），改成post.data.published
      const postDate = new Date(post.date);
      // 判断文章日期是否在近30天范围内（含当天）
      return postDate >= thirtyDaysAgo;
    });
  });

  // 保留你原本的其他配置（比如addPassthroughCopy之类的）
};

二、在Nunjucks模板中调用过滤器展示文章 #

假设你的目标集合名称是posts（根据自己的集合名替换），在需要展示近30天文章的模板里写以下代码：

{# 先过滤出近30天的文章 #}
{% set recentPosts = collections.posts | last30Days %}

{# 展示结果 #}
{% if recentPosts.length > 0 %}
  <h2>近30天更新的文章</h2>
  <ul>
    {% for post in recentPosts %}
      <li>
        <a href="{{ post.url }}">{{ post.data.title }}</a>
        <span class="post-date">{{ post.date | date("YYYY-MM-DD") }}</span>
      </li>
    {% endfor %}
  </ul>
{% else %}
  <p>近30天暂无新文章</p>
{% endif %}

注意事项 #

• 替换collections.posts为你实际的集合名称，比如你的集合叫articles就改成collections.articles
• 如果文章的日期字段不是date，要同步修改过滤器里的post.date和模板里的post.date，比如改成post.data.published
• 保存配置文件和模板后，重启Eleventy开发服务器才能生效

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