Hye, this is custom numbered pagination with first, next and prev links. Also the user can limit the pagination numbers.
Just include this code in pagination.hbs
file inside ghost theme partials directory.
Any improvements are always welcome.
{{!-- custom pagination file --}}
<nav class="pagination" role="navigation">
{{#if prev}}
<a class="prev" href="{{page_url prev}}">← Prev</a>
{{/if}}
<div class="page-nums">
{{!-- <a href="" class="current">{{page}}</a>
<a href="">1</a> --}}
</div>
{{#if next}}
<a class="next" href="{{page_url next}}">Next →</a>
{{/if}}
</nav>
<script>
var pageTotal = parseInt("{{pages}}"),
pageCurrent = parseInt("{{page}}"),
limitPage = 5,
page = 1,
pageNums = document.querySelector('.pagination .page-nums');
if(pageCurrent >= limitPage) {
page = pageCurrent - 1;
pageNums.innerHTML += '<a class="first" href="{{page_url}}page/' + 1 + '">First</a>';
}
for(i = 0; i < limitPage; i++) {
if(page === pageCurrent) {
pageNums.innerHTML += '<a class="current" href="{{page_url}}page/{{page}}">{{page}}</a>';
}
else if(page <= pageTotal){
pageNums.innerHTML += '<a href="{{page_url}}page/' + page + '">' + page + '</a>'
}
page++;
}
</script>
This works better.
What could be done to replace the
data
part with something else than_______
?