Older Posts button from pagination just refreshes page

Developer help
1

I have the following code on a custom page being /art

    <div class="post-feed">
        {{#get "posts" include="tags" filter="tag:art"}}
            {{#foreach posts}}
                {{> "showcase-item"}}
            {{/foreach}}
            {{pagination}}
        {{/get}}
    </div>

Problems:

  1. Clicking on “Older Posts” refreshes page instead of going to next page. I think I need to add something in routes.yaml, but not sure what. Right now I have: /art/: art
  2. There are 15 posts on 1 page. I set in package.json under config: “posts_per_page”: 3. Not sure why it’s displaying 15?

I’m lacking a good tutorial on pagination and have just got to this point by some scattered info around the forums. Sorry if I missed the right tutorial.

2

Pagination isn’t compatible with the get helper because the get helper doesn’t create a paginated collection — it just fetches posts.

If you want to create a custom collection/channel, you’ll want to use custom routing and remove the get helper.

See:

3

Thanks, but I still don’t seem to get it right.
I have however gotten a step closer!

Right now the posts don’t show up, but the pagination works. So it goes to /art/page/2, /art/page/3 and so on, also shows how many pages there are.
I’m not sure why I’m not getting the data of the posts, perhaps I’m doing something wrong.

From the link you’ve sent me I learned this:

collections:
  /art/: 
    permalink: /art/{slug}/
    template: art
    filter: tag:art
    data: tag.art
  • permalink for the pages to work
  • template to point to art.hbs
  • filter to filter posts so we don’t load all of the data
  • data to pass along the data of that tag

So I removed the get helpers as recommended, I took a quick look on how things worked on index.hbs and came up with this code:

    <div class="post-feed">
        {{#foreach posts}}
            {{> "showcase-item"}}
        {{/foreach}}
        {{pagination}}
    </div>

What am I missing here?

4

Can you share your whole routes.yaml file?

5

There you go:

routes:
  /sci-fi/: sci-fi
  /shop/: shop
  

collections:
  /:
    permalink: /{slug}/
    template: index
  /tags/:
    permalink: /{slug}/
    template: tags
  /art/: 
    permalink: /art/{slug}/
    template: art
    filter: tag:art
    data: tag.art

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/
6

Thanks. You’re going to have some trouble here. Collections are exclusive, which means that once one collection has a set of posts, they aren’t available for another collection to have any.

For the moment, take out the tags collection but tell me what you’re using it for. Next, try this:

collections:
  /art/:
    permalink: /art/{slug}/
    template: art
    filter: tag:art
    data: tag.art
  /:
    permalink: /{slug}/
    template: index
    filter: tag:-art

This creates two exclusive collections (which means that art posts will no longer appear on the homepage). If you want those posts there, too, then look at the channel option in the docs.

7

Thank you for clearing that out and patiently helping me. I don’t want to use a collection. So I finally got it right using a channel.
I’m leaving the yaml here for others that might need it in the future.

routes:
  /sci-fi/: sci-fi
  /shop/: shop
  /art/: 
    controller: channel
    filter: tag:art
    permalink: /art/{slug}/
    template: art
    data: tag.art
  

collections:
  /:
    permalink: /{slug}/
    template: index
  /tags/:
    permalink: /{slug}/
    template: tags

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/
1 Like