javascript - 您如何按包含标签的帖子数量对博客帖子标签列表进行排序（在 Eleventy 中使用 Nunjucks）？

Question

我有一个用 Eleventy（静态站点生成器）构建的博客，使用 Nunjucks 作为模板语言。

我有一个页面，列出了我分配给我的帖子的所有标签。它按字母顺序列出它们，每个标签的帖子数。

我还想做的是按频率顺序列出标签（首先是最常用的标签）。

用于获取字母列表（带计数）的代码如下所示：

<section id="tags-number-of-posts">
  {% for tag2, posts2 in collections | dictsort %}
  {% set tag2Url %}/tags/{{ tag2 | slug }}/{% endset %}
   <a href="{{ tag2Url | url }}">{{ tag2 }} ({{ posts2 | length }})</a><br/>
  {% endfor %}
</section>

现在的结果是这样的：

搅拌机 (1)
船 (2)
炸弹工厂 (1)
篝火 (4)
书籍 (3)

但我希望它是：

篝火 (4)
书 (3)
船 (2)
搅拌机 (1)
炸弹工厂 (1)

（您可以在此部署预览站点查看实际结果：https ://text-timeline--davidrhoden-basic.netlify.app/tagslist/ 。）

我尝试更改dictsort为sort(attribute="posts2.length")，以及其他可能有意义的排列，例如sort(attribute="length")，但没有任何效果。

我猜“长度”不是帖子本身的属性。所以也许像这样的过滤器sort在这种情况下不起作用。

但是有没有办法按这些帖子数对这个列表进行排序？肯定有的。我需要引入 lodash 之类的东西，还是一些 javascript 函数之类的东西map？

标签： javascriptloopssortingnunjuckseleventy

Answer 1

您也许可以使用Eleventy 自定义集合来做您想做的事情。我们可以在.eleventy.js文件中使用 Javascript 来统计每个标签中的帖子数，然后按帖子数对数据进行排序。

由于 Eleventy 似乎没有给我们预先分组的标签和帖子对象，所以我们自己做。这确实意味着，如果您在一篇文章上放置重复的标签，它将被计算两次。可以对标签进行重复数据删除，但如果您小心的话，这应该不是问题。

// .eleventy.js
module.exports = function (eleventyConfig) {
  // ...

  // addCollection receives the new collection's name and a
  // callback that can return any arbitrary data (since v0.5.3)
  eleventyConfig.addCollection('bySize', (collectionApi) => {
    // see https://www.11ty.dev/docs/collections/#getall()
    const allPosts = collectionApi.getAll()

    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
    const countPostsByTag = new Map()
    allPosts.forEach((post) => {
      // short circuit eval sets tags to an empty array if there are no tags set
      const tags = post.data.tags || []
      tags.forEach((tag) => {
        const count = countPostsByTag.get(tag) || 0
        countPostsByTag.set(tag, count + 1)
      })
    })

    // Maps are iterators so we spread it into an array to sort
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
    const sortedArray = [...countPostsByTag].sort((a, b) => b[1] - a[1])
    
    // this function returns an array of [tag, count] pairs sorted by count
    // [['bonfires', 4], ['books', 3], ['boats', 2], ...]
    return sortedArray
  })
  })

  return {
    // ...
  }
}

然后我们可以在 Nunjucks 中使用这些数据collections.bySize。

<section id="tags-number-of-posts">
    {# we can still destructure the tag name and count even though it's an array #}
    {% for tag, count in collections.bySize %}
        {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
        <a href="{{ tagUrl | url }}">{{ tag }} ({{ count }})</a><br/>
    {% endfor %}
</section>

如果您需要在集合对象中包含帖子数组而不仅仅是帖子数量，也可以修改 JavaScript 来实现。