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.

[lorcand]

Hi, I am looking through this again. Have you come across any themes that do this, but maybe group by month? I would like an archive page for nearly 2K posts over about a 15 year period, and this would be too long. Thought I would ask Thanks.

[harsht]

I am having the same issue as @pts

@DavidDarnes The code you shared needs to be embedded in one of the base files that comes with the downloaded theme, or do I need to create a new .hbs file. I’m using this code with the Alto and Dawn themes and can’t seem to get it to work. I have very minimal web development knowledge and would appreciate any extra input you can share.

Thanks so much, I’m glad to have joined this forum and excited to learn from other members.

[DavidDarnes]

You’ll need to create a new template file and insert the first block of code into it, the second part goes into your css file