Add Pagination when using Ghost's Public API
Note: The API is currently in beta. Some things in the post may change as Ghost solidifies how the API will function.
When using Ghost's public API, you do not have access to some helpers like pagination. This leaves you stuck with only getting a few posts, or getting all of them. We already have how to load posts dynamically which is kind of an infinite scroll, but what if you want actual pagination? This is how we would approach this problem:
Note: We are going to be modeling all the HTML after the default Casper theme, so, that may change for you, but the concept of how this works should stay the same
Make sure the public API is enabled
So, the way this is going to work, is if you are at your blogs default url (ex
ghostforbeginners.com), the theme will load the first 2 posts (you can change this in the code we show). If you want to go to the next page, it will route you to a url that looks like
ghostforbeginners.com?page=2. This will let the theme know to load the 2nd set of posts and so on for all the pages. When it reaches the end, there will be no next post button.
I am going to give you the full code here, and then I will walk you through each part of it. So, here is the complete code we are going to use:
So, since I am using the casper theme, the first thing I did was remove the
loop.hbspartials file since we won't be needing it. Then, I added the next and previous buttons to the
Next, create a file called
ajaxLoad.js(or whatever you want) and place it in the
Include this file in your
Now, we need to build out the
ajaxLoad.jsfile with everything it needs. This file is going to need to, grab the client id and client secret, figure out what page the visitor is on, make an AJAX call to get the posts for the correct page, load all post info, append the post info to the content div, and finally enable or disable the next/previous post buttons.
This script file is commented as much as I could, but I will walk you though it also. First, we need to build the variables. We start by grabbing the base url for later use. Then, we check to see if there is any url attributes (
?page=whatever) and create the
nextPagevalue from that. The variable you will most likely change is the
paginationvariable. This is how many posts will load from the AJAX call.
Now that we have the variables, we can start making our first AJAX call. The url is going to include the number of posts to get and which page of posts to get (for more information on building the api url, check out the offical docs). Once we have gotten back the data, we set the links for the next and previous buttons based on the meta data that comes back.
After we have set the buttons, we loop through each post and make one more AJAX call to get all the author info. Once inside the author info, we make a call to a function (sending through both the post and author data) that will build out the posts themselves. We will look at this function in the next step.
This function builds a large HTML variable to append the data to the content div. This you will most likely change to fit the HTML that your site uses. You can see how we append the HTML as text, and intersperse it with the post specific variables. We also do checks to see if things like author images exist before appending the url.
Restart Ghost and you should see it all working!
At the top of this post, there is not only the full code that we used, but also a link to this theme on GitHub. Feel free to check out and download that theme if you want to compare to what you are doing with your theme or to verify anything your working on.
Please let us know if you have any questions in the comments below. This is not exactly a beginner theme change and has a lot of variables. We are happy to help out to get it all working for you.