Custom Index Linking to Index of Posts

#1

I have a custom index that displays the first 5 blogposts and also a section displaying the tags and recent blogposts. I want to be able to have a “See All Blogposts” link that directs a user to a standard list of the blogposts with a pagination section in the footer to see additional pages of blogposts. However, I’m not sure how to architect the standard list of blogposts page and then have pagination set up for each subsequent pages of posts (i.e. /page/2, /page/3)

Here is how I am looping through blogposts on my index.hbs page:

{{#foreach posts limit="5"}}
// Articles
{{/each}}

And in my package.json:

"config": {
    "posts_per_page": 4,
   // additional configuration
}

Finally the link to see the first 5 blogposts with a pagination section to view additional pages. /post comes up with an error 404 page at the moment, which is to be expected:

<a href="/post" class="p-3 bg-primary-700 rounded-lg hover:font-bold">See All Articles >></a>

Would I need to create a custom page and reference in either the route.yaml or create a custom page to achieve this?

#2

You can use a combination of custom routes and collections. Create a new hbs file for your homepage (let’s say homepage.hbs) and add your custom logics (first 5 posts, tags and other stuff) there. index.hbs should be used for posts with pagination.

Then add this to routes.yaml.

routes:
  /:
    controller: channel
    template: homepage

collections:
  /post/:
    permalink: /{slug}/
    template: index
2 Likes
#3

That was exactly what I was looking for. Thank you!

1 Like