Ghost-Paginator

Custom handlebars helper to improve Ghost pagination. It adds possibility to display first, previous, current, next and last pages links:

Installation

npm install ghost-paginator

Example

Register custom helper in the config.js ghost file:

  var paginate = require('ghost-paginator');
  var hbs = require('express-hbs');
  hbs.registerHelper('paginate', paginate);

Update ghost template partials/pagination.hbs:

<nav class="pagination" role="navigation">
    {{#paginate page pages}}

        {{#first}}

            <a href="{{page_url page}}">{{page}}</a>
        {{/first}}

        {{#prev}}

            {{#if more}}

                <span>&hellip;</span>
            {{/if}}

            <a href="{{page_url page}}">{{page}}</a>
        {{/prev}}
        {{#active}}

            <span>{{page}}</span>
        {{/active}}

        {{#next}}

            <a href="{{page_url page}}">{{page}}</a>
            {{#if more}}

                <span>&hellip;</span>
            {{/if}}
        {{/next}}
        {{#last}}

            <a href="{{page_url page}}">{{page}}</a>
        {{/last}}

    {{/paginate}}

</nav>

You can also include previous and next links using ghost built-in pagination attributes:

<nav class="pagination" role="navigation">
    {{#if prev}}
        <a href="{{page_url prev}}">
            <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </a>
    {{/if}}
    {{#paginate page pages}}

        {{#first}}

            <a href="{{page_url page}}">{{page}}</a>
        {{/first}}

        {{#prev}}

            {{#if more}}

                <span>&hellip;</span>
            {{/if}}

            <a href="{{page_url page}}">{{page}}</a>
        {{/prev}}
        {{#active}}

            <span>{{page}}</span>
        {{/active}}

        {{#next}}

            <a href="{{page_url page}}">{{page}}</a>
            {{#if more}}

                <span>&hellip;</span>
            {{/if}}
        {{/next}}
        {{#last}}

            <a href="{{page_url page}}">{{page}}</a>
        {{/last}}

    {{/paginate}}
    {{#if next}}
        <a href="{{page_url next}}">
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </a>
    {{/if}}

</nav>

To remove undesired whitespaces, look at Whitespace Control section on the official handlebars site.

Tests

npm test

License

MIT License