Ghost Custom Pagination

Question

I just design a theme for ghost blogging platform, by reading the ghost theme documents. all I need now is customizing the pagination. the document says create a pagination.hbs inside the partial folder. but the problem is I don't know how should the markup be.

Bellanca

Answer 1

There's a brief post here that explains where to find the relevant bit of code for your pagination.hbs file. You'll actually be able to use the default pagination code as your template.

As that post notes, you need to copy the default pagination code from core/server/helpers/tpl/pagination.hbs in the Ghost source code and use it to create your own pagination.hbs file in the partials directory of your theme.

You'll see the markup that you need to edit there, i.e.:

<nav class="pagination" role="pagination">
    {{#if prev}}
        <a class="newer-posts" href="{{pageUrl prev}}">&larr;</a>
    {{/if}}
   <span class="page-number">Page {{page}} of {{pages}}</span>
    {{#if next}}
        <a class="older-posts" href="{{pageUrl next}}">&rarr;</a>
    {{/if}}
</nav>

You'll need to restart Ghost after saving your edits to see the changes.

Pester

should use role="navigation" instead of role="pagination" for better looking. – Ballman

Answer 2

I have created some JavaScript code that extends the default Ghost pagination. Instead of showing "Page 1 of X", it shows a row of page numbers with previous, next, first, and last buttons. It also has an ellipsis in the center for sites with a lot of pages. It is fully customizable from the Code Injection settings page.

My implementation creates a bootstrap pagination component, but I'm pretty sure you could output whatever you wanted given the classes and elements that are created (<nav> and <ul> elements).

Here is some code that I include before the {{ghost_foot}}. That way, I can override some of the settings in the Footer section of the Code Injection:

var prev;
var pages;
var page;
var next;
var pageUrlPrev;
var pageUrlNext;
var numbersSurroundingEllipses = 3;
var useSimplePagination = false;

Here is the pagination.hbs for the customized pagination that I am using on my site:

<script type="text/javascript">
    // set the values that we'll use in the bootstrap-pagination.js file
    {{!if there is no value for the variable, display a 0}}
    prev = {{#if prev}}{{prev}}{{else}}0{{/if}};
    pages = {{#if pages}}{{pages}}{{else}}0{{/if}};
    page = {{#if page}}{{page}}{{else}}0{{/if}};
    next = {{#if next}}{{next}}{{else}}0{{/if}};
    pageUrlPrev = '{{pageUrl prev}}';
    pageUrlNext = '{{pageUrl next}}';
    pageUrlFirst = '{{pageUrl 1}}';
    pageUrlLast = '{{pageUrl pages}}';
</script>
<nav>
  <ul class="pagination bootstrap-pagination">
  </ul>
</nav>

Here is the javascript code that will add the pagination to the above HTML.

Note: since these links are created on the client, they will not be available to search engines during indexing. However, it is my understanding that the search engines utilize the link rel="prev" and link rel="next" tags that Ghost outputs for each of the index pages.

Here is what they look like for my website:

<link rel="prev" href="https://cerkit.com/page/2/" />
<link rel="next" href="https://cerkit.com/page/4/" />

That leads me to believe that search engines can navigate between pages and access all links. However, I have not confirmed this with anyone who would know for sure, so do some research if you think this might be an issue.

I also made sure that I submitted my Ghost sitemap link to the search engines just to make sure.

This gives you another option when working with pagination.

Here is the full write-up on my blog that gives a few more details.

I have all of this (and a few other Ghost tricks like binding Font Awesome icons to navbar links) on my website: cerkit.com.

Madelon