I am trying to organize a list of blog post tags in Eleventy using Nunjucks based on the number of posts that each tag contains. Can you help me figure out

Question

I am trying to organize a list of blog post tags in Eleventy using Nunjucks based on the number of posts that each tag contains. Can you help me figure out

I currently manage a blog using Eleventy as the static site generator, with Nunjucks as the templating language.

One of the features on my site is a page that displays all the tags assigned to my posts in alphabetical order along with the number of posts per tag.

However, I am now looking to rearrange the tags based on their frequency, starting with the most-used tags at the top.

The code snippet responsible for generating the current alphabetical list with post counts is:

<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>

Currently, the displayed result looks like this:

Blender (1)
boats (2)
Bomb Factory (1)
bonfires (4)
books (3)

but I would prefer it to be sorted by frequency like this:

bonfires (4)
books (3)
boats (2)
Blender (1)
Bomb Factory (1)

(The live version can be viewed at: .)

I have attempted changing the dictsort to

sort(attribute="posts2.length")

, among other variations, but without success.

It seems that 'length' is not an attribute I can sort by directly. Is there a way to achieve this kind of sorting based on post counts? Should I consider incorporating lodash or employing a JavaScript function like map?

javascript loops sorting nunjucks eleventy

Answer 1

Answer №1

To achieve your desired outcome, consider utilizing Eleventy custom collections. By leveraging Javascript within the .eleventy.js file, you can accurately calculate the count of posts under each tag and subsequently organize the data based on post count.

While Eleventy doesn't automatically provide a pre-organized object of tags and posts, this information can be manually curated. However, it's important to note that duplicates in tags may result in inaccurate counts unless they are deduplicated cautiously.

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

  // addCollection is used to create a new collection with arbitrary data (since v0.5.3)
  eleventyConfig.addCollection('bySize', (collectionApi) => {
    const allPosts = collectionApi.getAll()

    const countPostsByTag = new Map()
    allPosts.forEach((post) => {
      const tags = post.data.tags || []
      tags.forEach((tag) => {
        const count = countPostsByTag.get(tag) || 0
        countPostsByTag.set(tag, count + 1)
      })
    })

    const sortedArray = [...countPostsByTag].sort((a, b) => b[1] - a[1])

    return sortedArray
  })
  })

  return {
    // ...
  }
}

Once the sorting is done, Nunjucks can access this data using collections.bySize.

<section id="tags-number-of-posts">
    {% for tag, count in collections.bySize %}
        {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
        <a href="{{ tagUrl | url }}">{{ tag }} ({{ count }})</a><br/>
    {% endfor %}
</section>

If you require the array of posts in addition to post counts within your collections object, adjustments can be made in the JavaScript code accordingly.

Answer 2

To achieve your desired outcome, consider utilizing Eleventy custom collections. By leveraging Javascript within the .eleventy.js file, you can accurately calculate the count of posts under each tag and subsequently organize the data based on post count.

While Eleventy doesn't automatically provide a pre-organized object of tags and posts, this information can be manually curated. However, it's important to note that duplicates in tags may result in inaccurate counts unless they are deduplicated cautiously.

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

  // addCollection is used to create a new collection with arbitrary data (since v0.5.3)
  eleventyConfig.addCollection('bySize', (collectionApi) => {
    const allPosts = collectionApi.getAll()

    const countPostsByTag = new Map()
    allPosts.forEach((post) => {
      const tags = post.data.tags || []
      tags.forEach((tag) => {
        const count = countPostsByTag.get(tag) || 0
        countPostsByTag.set(tag, count + 1)
      })
    })

    const sortedArray = [...countPostsByTag].sort((a, b) => b[1] - a[1])

    return sortedArray
  })
  })

  return {
    // ...
  }
}

Once the sorting is done, Nunjucks can access this data using collections.bySize.

<section id="tags-number-of-posts">
    {% for tag, count in collections.bySize %}
        {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
        <a href="{{ tagUrl | url }}">{{ tag }} ({{ count }})</a><br/>
    {% endfor %}
</section>

If you require the array of posts in addition to post counts within your collections object, adjustments can be made in the JavaScript code accordingly.

I am trying to organize a list of blog post tags in Eleventy using Nunjucks based on the number of posts that each tag contains. Can you help me figure out

Answer №1

Similar questions

Emotion, material-ui, and typescript may lead to excessively deep type instantiation that could potentially be infinite

Differentiate among comparable values through placement regex

Improving code efficiency for checkboxes in upcoming TypeScript versions

Is there a way for me to programmatically modify a .env file using an npm script?

Is it best practice to initialize loaded scripts before the JQuery .load callback is called or should it be done after the .ready callback in the loaded script?

The deployment of my Node application on Heroku is causing an error message: node-waf is not

How to retrieve a string from a regular expression in Javascript without [Object object] output

Incorporating JavaScript unit tests into an established website

"Using JavaScript to trigger a button click event, and then

Using JSF 2.1 for Ajax autocomplete with server search triggered only when user pauses typing

Encountering the AngularJS .Net Core routing $injector:modulerr error

Using Backbone to Handle Different Data Formats

Why is the autocomplete minlength and maxheight not functioning properly in MVC?

Show information retrieved from fetch api

I am facing an issue where an AJAX post to Express is not returning any data to req.query. I have tried various solutions but nothing seems to

Is there a way to retrieve metadata from a web URL, like how Facebook automatically displays information when we share a URL in a status update?

Dealing with encoding problems in Node.JS when parsing JSON data with UTF-

Enhancing PHP function speed through pre-compilation with Ajax

Discovering the magic of activating a JavaScript function on jQuery hover

Guide to generating customized CSS styles on-the-fly in Vue (similar to Angular's dynamic styling capabilities)