Random Errors

Posted: March 11, 2023 | Categories: Eleventy

I recently switched this site to Eleventy and I noticed that my posts weren't sorting correctly on the home page. I want them sorted in reverse chronological order, but the site did the opposite.

I used Raymond Camden's excellent A Complete Guide to Building a Blog with Eleventy and from it I learned I could sort posts in reverse order using the following:

{% for post in posts reversed %}
  <a href="{{post.url}}">{{ post.data.title }}</a>, posted {{ post.date | niceDate }}<br/>
  {% excerpt post %}
{% endfor %}

And that's what I did in my code. I started reading around on the Eleventy docs and confirmed this approach in the Collections docs.

I started looking around in my site's code and found this in the front matter of my home page:

---
title: Home
layout: home
pagination:
  data: collections.post
  size: 10
  alias: posts
  reverse: true
---

It sets up a set of pages with ordered posts, reversed because of the reverse: true. That was the problem, I was reverse ordering them twice. As soon as I removed reversed from my liquid template it works as expected. See the 'fixed' template below:

{% for post in posts %}
  <a href="{{post.url}}">{{ post.data.title }}</a>, posted {{ post.date | niceDate }}<br/>
  {% excerpt post %}
{% endfor %}