Eleventy中使用Nunjucks实现博客标签按关联文章数量排序

你之前的写法不生效是因为Nunjucks内置的sort和dictsort过滤器都无法直接对字典的值的长度做排序，需要先把标签字典结构转为带计数属性的对象数组，再按计数属性倒序排序即可，不需要引入lodash等额外依赖，以下是两种实现方案：

方案一：直接在Nunjucks模板内处理 #

无需修改Eleventy配置，直接改写原有标签页模板代码即可：

<section id="tags-number-of-posts">
  {# 把标签字典转换为带计数属性的对象数组 #}
  {% set tagList = [] %}
  {% for tag, posts in collections %}
    {% set tagList = tagList.concat([{
      name: tag,
      posts: posts,
      count: posts | length
    }]) %}
  {% endfor %}

  {# 按标签使用次数倒序排序后遍历输出 #}
  {% for tagItem in tagList | sort(attribute='count', reverse=True) %}
    {% set tag2Url %}/tags/{{ tagItem.name | slug }}/{% endset %}
    <a href="{{ tag2Url | url }}">{{ tagItem.name }} ({{ tagItem.count }})</a><br/>
  {% endfor %}
</section>

方案二：新增Eleventy全局过滤器（更易复用） #

如果多个页面都需要用到按频率排序的标签，可以在Eleventy配置文件中定义全局过滤器，模板中直接调用即可：

1. 编辑你的.eleventy.js配置文件，新增自定义过滤器：

module.exports = function(eleventyConfig) {
  // 新增按标签使用次数倒序排序的过滤器
  eleventyConfig.addFilter('sortTagsByCount', function(tagCollections) {
    return Object.entries(tagCollections)
      .map(([tagName, posts]) => ({
        name: tagName,
        posts: posts,
        count: posts.length
      }))
      .sort((a, b) => b.count - a.count);
  });

  // 保留你原有其他配置项
};

2. 模板中直接调用过滤器即可，代码更简洁：

<section id="tags-number-of-posts">
  {% for tagItem in collections | sortTagsByCount %}
  {% set tag2Url %}/tags/{{ tagItem.name | slug }}/{% endset %}
   <a href="{{ tag2Url | url }}">{{ tagItem.name }} ({{ tagItem.count }})</a><br/>
  {% endfor %}
</section>

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