Search code examples
htmlnode.jsblogsghost-blog

Ghost Custom Pagination


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.


Solution

  • 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.