List posts group by year
-
January 1, 2021 at 10:25 pm #4915
[anonymous]
Hello,
First of all, I wish you a Happy New Year, success in your projects, good health and happiness.
I’m in the process of creating my own theme and visually grouping the posts with the year of creation at the top of the list.
Do you have a tip for getting the year to the top of the list ? Via the {{#getPosts}} helper, {{#each posts}} or other ?
Thanks for your advices
Here, example of the desired rendering:
<h2>2020</h2> Lorem ipsum dolor sit amet - December 18, 2020 Sed ut perspiciatis unde omnis - April 02, 2020 Sed ut perspiciatis unde omnis - January 13, 2020 <h2>2019</h2> Lorem ipsum dolor sit amet - Spetember 15, 2019 Sed ut perspiciatis unde omnis - Mars 23, 2019
January 2, 2021 at 7:47 am #4916Bob
I’m afraid it’s not easy to do, there is no ready helper for this, you can try to use tags (mark them as hidden) to group posts by years.
January 2, 2021 at 11:41 am #4917[anonymous]
Hello Bob,
Thank you for your answer, very good tip. I will do like that.
Thank you for your help.
January 2, 2021 at 2:39 pm #4918[anonymous]
Hello,
I took your advice and coded this:I’m looking for a way to loop through each year if an article exists, I haven’t found a solution in the docs. Because this solution requires me to manually implement the code for each year.
Do you have an idea ?
Thank you so much, Nicolas
<h2>2020</h2> {{! loop that generates a list of posts for 2020 }} {{#getPostsByTags (concatenate "count=999&tag_as=slug&tags=2020&excluded=0&offset=0&orderby=modifiedAt&ordering=asc")}} <ul class="posts-list"> <li class="posts-list-item"> {{! post title }} {{title}} {{! /post title }} {{! post creation date }} <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}"> {{date createdAt}} </time> {{! /post creation date }} {{/getPostsByTags}} {{! /loop that generates list of posts }} <h2>2019</h2> {{! loop that generates a list of posts for 2019 }} {{#getPostsByTags (concatenate "count=999&tag_as=slug&tags=2019&excluded=0&offset=0&orderby=modifiedAt&ordering=asc")}} <ul class="posts-list"> <li class="posts-list-item"> {{! post title }} {{title}} {{! /post title }} {{! post creation date }} <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}"> {{date createdAt}} </time> {{! /post creation date }} {{/getPostsByTags}} {{! /loop that generates list of posts }}January 3, 2021 at 4:48 pm #4927[anonymous]
Hi @Nicolas,
You can do it much easier by custom helpers:
1) Please create in helpers.js the following helpers:
let themeHelpers = { yearsInArchive: function(startYear) { let years = []; let currentYear = new Date().getFullYear(); for (let i = currentYear; i >= startYear; i--) { years.push(i); } return years; }, getPostsByYear: function(posts, year) { return posts.filter(post => new Date(post.createdAt).getFullYear() === year); } }; module.exports = themeHelpers;2) Then use the following code in your theme:
<h1>YEARS</h1>
-
{{#each (yearsInArchive 2016) }}
-
<h2>{{ this }}</h2>
{{#if (getPostsByYear @website.contentStructure.posts this)}}
-
{{#each (getPostsByYear @website.contentStructure.posts this)}}
- {{title}} - {{date createdAt 'YYYY-MM-DDTHH:mm'}} {{/each}}
{{/each}}
It should render posts separated by years – if you change the year in the yearsInArchive helper – you can change the start year for your archive. The final year will be always the current year 🙂
January 3, 2021 at 9:40 pm #4932[anonymous]
Hi Tomasz,
I wish you a happy new year, success in your projects, happiness and all that goes with it.
Thanks for the “Helper”, it works perfectly.
I will continue to read the documentation to learn more.
See you soon, Nicolas
-
<h2>{{ this }}</h2>
{{#if (getPostsByYear @website.contentStructure.posts this)}}