Sign in

List posts group by year

  • This topic has 5 replies, 3 voices, and was last updated 2 weeks, 3 days ago by .
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #4915
    Nicolas

    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&gt
    Lorem ipsum dolor sit amet
    - Spetember 15, 2019
    Sed ut perspiciatis unde omnis
    - Mars 23, 2019
    #4916
    Bob
    Support

    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.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #4917
    Nicolas

    Hello Bob,

    Thank you for your answer, very good tip. I will do like that.

    Thank you for your help.

    #4918
    Nicolas

    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 }}

     

    #4927
    Tomasz Dziuda
    Moderator

    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) }}
    1. <h2>{{ this }}</h2> {{#if (getPostsByYear @website.contentStructure.posts this)}}
        {{#each (getPostsByYear @website.contentStructure.posts this)}}
      1. {{title}} - {{date createdAt 'YYYY-MM-DDTHH:mm'}}
      2. {{/each}}
      {{else}} No posts {{/if}}
    2. {{/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 🙂

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #4932
    Nicolas

    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

     

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘List posts group by year’ is closed to new replies.