Monthly Archive Index Pages

[pts]

Hi. I’m relatively new to Ghost—I’m working on my second site with it, and my second custom theme—and I’ve run into a dead end. (I’m prototyping the site on Glitch using Ghost 3.0.0)

I want to have an archive index page with no individual entries, but rather a list of months/years, i.e. “January 2020”. Following a month link would then bring you to a page containing all the posts for that month.

I’m having trouble figuring out how to do either of these things. There doesn’t seem to be a way to iterate over post dates using something like {{foreach}}, and I’m also having trouble figuring out how to create a combination of template & route that would result in listing all the posts for a given month.

Any help in approaching either of these problems would be very appreciated!

[DavidDarnes]

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!

[John]

You can see that code in action here thelistener.co/archive/

[pts]

Holy cow, thank you so much! This is fantastically helpful, and I would never have figured it out on my own; it didn’t even cross my mind that CSS would factor into the solution.

[pts]

An example to work from!!! Thank you so much! This—no joke—makes my day.

[DavidDarnes]

You’re very welcome . I’d love to take the credit but in this case it was @John who figured out this CSS trick

[rolando]

Do you think this feature could be built-in some time in Ghost?
Most of the blogs use this feature

[denvergeeks]

Here is another implementation of a “Post Archive”, which the developer has kindly included in his free “Fizzy” theme as a custom template (so you can copy it and use in your own site too):

Post Archive

[jsh4]

how did you get on with this, @pts? I’m now attempting the same with John’s helpful suggestion

[eriohm]

How do I do this?! Looks awesome but a few more hints would be appreciated. Want to add an archive page just like this to the Attila theme and I’m very new at Ghost (since 2020-11-07) after being a long time WordPress user.