Pagination Post Limit on home.hbs doesn't seem to work

Developer help
1

Hi there,

I’m trying to use a home.hbs file to do up a custom homepage. I wanted to use pagination and implemented the {{pagination}} code within the home.hbs page.

I’ve also updated the config details "posts_per_page": 10, in my package.json file.

I’m currently using a forked version of the Casper theme, and had also removed the infinite-scroll.js file from /js/lib. However, though at the bottom of my homepage, it shows up the pagination, the page still displays more than the first 10 posts.

I’ve double-checked that /page/2/, where it pulls from index.hbs, it pulls the right set of post from post-11 onwards.

I’m not too sure where else to edit to ensure that it only loads the first 10 posts within my home.hbs.

  • URL: https://therobexperiment.com/ — As this is a public page, I did not compile the incomplete theme zip to post it online
  • Ghost v4.1.2
  • Node v14.16.0
  • macOS Catalina v10.15.7
  • Chrome v89.0.4389.114

Hope someone can assist. Thank you!

Code for partial segment for home.hbs

{{!-- The main content area --}}

    <div class="post-feed">
        {{#foreach posts limit="10"}}

            {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
            {{> "post-card"}}

        {{/foreach}}
    </div>

    {{pagination}}
</div>
2

@sgrobert looking at your url the infinite scroll code is still there. Did you follow Casper’s development instructions? The CSS and JS is built from the source files to concatenate and minify for performance, if you removed the infinite-scroll.js file and didn’t rebuild then the “built” JS file will still contain it.

3

Hi @Kevin,

I did do the yarn dev and yarn zip processes. However, I also do assume somehow the code is still in there somehow. Not too sure why or how the code didn’t get re-built into built.

Just posted the theme zip and you can browse at https://therobexperiment.com/ .

I do believe the infinite scroll is still in there but not entirely sure how to remove it. Any tips? As on GitHub - TryGhost/Casper: The default theme for Ghost, it doesn’t seem to have any solution to resolve that.

Thanks!

4

Hi @Kevin,

Somehow I managed to resolve it. So here are just a few steps in case someone else needed a solution as it is hard to find one via Google as well.

  1. Go to package.json', under [ “config”: {} ], insert / update “posts_per_page”: 5,`
  2. Go to /<theme>/assets/js/lib, remove infinite-scroll.js.
  3. If you are on Casper Theme (GitHub - TryGhost/Casper: The default theme for Ghost) like me, Go to /casper/assets/built, remove casper.js, so can "force-recompile this js file.
  4. If you are using Visual Studio Code, close the Workspace, then re-open it.
  5. Use Terminal to go to the Theme’s folder, do a yarn dev', then do another yarn zip`
  6. casper.js file should be regenerated and it should work by now. — https://therobexperiment.com/

–

However, I am just odd why there are no other way to manually “switch off” the function through a config code or something, as in the event I may want other pages to have “infinite scroll”, by re-installing it into my theme, the bug in my home.hbs will come up again.

Hopefully there will a solution in the near future! Thanks! Cheers! ;)

5

The majority of those steps should not be necessary so I’m not sure what’s going wrong for you :confused: The steps should be fairly straightforward:

  1. Download and extract your theme zip archive
  2. Delete <theme>/assets/js/lib/infinite-scroll.js
  3. Run yarn install, yarn dev, then yarn zip
  4. Upload the new theme zip in the admin area

If you are modifying theme files directly on the server instead of doing this then you’ll run into problems with caches and will need to restart Ghost every time you make a change. Also, don’t modify the casper theme files directly, they will be overwritten each time you upgrade - upload/copy it as a custom theme instead.

1 Like
6

Hi @Kevin,

Thanks for the detailed update.

I am currently using a copy of the casper theme, to build my own custom theme. Not too sure what happened for my case, but I only managed to get it to work this way on my system.

Oddly enough, as my of my js is but into a separate custom-js.js file, I do realise all these codes won’t entirely get 100% activated when I load-to-preview on my local-machine. Even the css codes don’t get reflected unless I do a inline css styling.

However, appreciate you helping to highlight the right methods to get it working! Thank you so much! Cheers!

7

How to get a next page or something? Do I have to insert that? I removed infinite scroll and updated the config to 10. I see 10 posts but no next button

8

Ah, we need to add {{pagination}} at the end

9

If you want to add pagination by click on “View More” Button

<nav class="pagination" role="navigation">
   {{#if prev}}
    <a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
  {{/if}}
  <span class="page-number {{akPage}}">Page {{page}} of {{pages}}</span>
  {{#if next}}
    <a id="load-more" class="older-posts" href="{{page_url next}}">View More</a>
  {{/if}}
</nav>