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

Is there a way to invoke an Angular2 function from within a Google Map infowindow?

How many server queries does a single web application require?

Troubleshooting Java REST service integration in AngularJS for UPDATE and DELETE operations

Incorporating jquery-ui Datepicker with dynamic text input functionality

The Vue.js router is malfunctioning

Is it possible for users to circumvent limitations on specific routes or pages in a Vue.js application by exploiting the fact that all the code is processed on the client

Initiating a file download using HTML

The issue of the selection option not being cleared after being set to 0 persists in JavaScript

I can't seem to retrieve any values from the API other than "chicken"

Showcase fullcalendar events that span across multiple rows and columns

Exploring data elements using iteration in JavaScript

Experiencing problems with malfunctioning javascript tabs

Tips for Enhancing JavaScript Performance

Is there a problem with addEventListener returning false?

Exploring Symfony2 controller integration with Javascript arguments

Exploring the Power of jQuery Deferreds and Promises through Multiple getJSON Requests

Implementing pagination within nested ng-repeat in Angular app

Pressing the button will activate the Ctrl+z and Ctrl+y key commands

Wheelnav.js implementing a dynamic bouncing animation

Improving sharing functionality across multiple VuGen scripts executed through Performance Center