Monthly Archive Index Pages

Themes
2

You’re in luck @pts, we’ve got something just for that. The post loop looks like this:

{{#foreach posts}}
  <article class="post post-date-{{date format="M"}}">
    <div class="post-label">{{date format="MMMM YYYY"}}</div>
    <a class="post-link" href="{{url}}">
      <h2 class="post-title">{{title}}</h2>
    </a>
  </article>
{{/foreach}}

This renders each post with the date above it in the format of Month and year, e.g. January 2020. They key part is the <article> element has a class which includes the post month as a single digit number, e.g. post-date-1 for January. We can then hook into that class using some CSS:

.post-date-1 + .post-date-1 .post-label,
.post-date-2 + .post-date-2 .post-label,
.post-date-3 + .post-date-3 .post-label,
.post-date-4 + .post-date-4 .post-label,
.post-date-5 + .post-date-5 .post-label,
.post-date-6 + .post-date-6 .post-label,
.post-date-7 + .post-date-7 .post-label,
.post-date-8 + .post-date-8 .post-label,
.post-date-9 + .post-date-9 .post-label,
.post-date-10 + .post-date-10 .post-label,
.post-date-11 + .post-date-11 .post-label,
.post-date-12 + .post-date-12 .post-label {
  display: none;
}

This CSS will pick out any post which immediately follows a post with a matching post-date-X class. The result is exactly as desired and meets accessibility expectations. Even works with pagination.

Hope this helps! :v:

3 Likes