GhostJS Numbered Pagination

pagination.hbs

<div class="row" style="display: none;">
    <ul id="pagination-list" class="pagination col s12 m8 offset-m2" role="navigation" style="display: flex; justify-content: center;">
        
    </ul>
        
    <div id="page-total" style="display:none;">{{pages}}</div>
    <div id="page-current" style="display:none;">{{page}}</div>
</div>

<script>
    var limit = 5;
    var pageTotal = document.getElementById('page-total').innerHTML;
    var pageCurrent = parseInt(document.getElementById('page-current').innerHTML);
    var nav = document.getElementById('pagination-list');

    var olderClass = 'class="waves-effect"';
    var newerClass = 'class="waves-effect"';
    if (pageCurrent == 1) {
        olderClass = 'class="disabled"';
    }
    if (pageCurrent == pageTotal) {
        newerClass = 'class="disabled"';
    }

    var older = '<li ' + olderClass + '><a href="/page/' + (pageCurrent - 1).toString() + '"><i class="material-icons" style="padding: 0.5rem;">chevron_left</i></a></li>';
    var newer = '<li ' + newerClass + '><a href="/page/' + (pageCurrent + 1).toString() + '"><i class="material-icons" style="padding: 0.5rem;">chevron_right</i></a></li>';
    var first = '<li ' + olderClass + '><a href="/page/1" style="padding:0;"><i class="material-icons" style="padding: 0.5rem; margin-right: -4rem;">chevron_left</i><i class="material-icons" style="padding: 0.5rem;">chevron_left</i></a></li>';
    var last = '<li ' + newerClass + '><a href="/page/' + pageTotal.toString() + '" style="padding:0;"><i class="material-icons" style="padding: 0.5rem;">chevron_right</i><i class="material-icons" style="padding: 0.5rem; margin-left: -4rem">chevron_right</i></a></li>';

    var pagination = first + older;
    var firstPage = 0;
    if ((pageTotal - limit) > 0) {
        if (pageCurrent > (pageTotal - limit) && pageCurrent <= pageTotal)
        {
            firstPage = (pageTotal - limit)
        }
    }
    for (i = firstPage + 1; i <= pageTotal; i++) {
        var margin = 'style="margin-left: 0.5rem;"'
        if (i > firstPage + limit) {
            break;
        }
        if (i == 1) { margin = '' }
        // If you are on the current page, do not link
        if (i == pageCurrent) {
                pagination = pagination + '<li class="active cyan darken-2 grey-text text-lighten-5" ' + margin + '><a href="">' + i +'</a></li>';
        } else {
            // Otherwise, add a link to the page
                pagination = pagination + '<li class="waves-effect grey lighten-5 cyan-text text-darken-2" ' + margin + '><a href="/page/' + i + '"> ' + i + '</a></li>';
        }
    }
    pagination = pagination + newer + last;
    if (pageTotal > 1) { 
        nav.parentNode.style.display = "block"; 
        nav.innerHTML = pagination;
    }
</script>

Based on: https://www.ghostforbeginners.com/add-numbered-pagination-to-ghost/

Example

Prerequisites

• Materialize CSS

Configuration

Change post per page

Add to package.json

"config": {
  "posts_per_page": 1
}

Change how many labels display on pagination

Change on pagination.hbs

<script>
  var limit = 5;
  ...
</script>