Add pagination to individual posts in a Ghost blog

README.md

Post pagination in Ghost blogs

This lets you split posts on a Ghost blog into multiple pages. Alls you have to do is put the scripts in, style the buttons, and place a special comment wherever you want the page breaks. This script will use the hash string to denote post pages, i.e. http://your-blog.com/post-123/#2

Usage:

1. Include the post-pages.js contents in a <script> tag in the footer section of the Code Injection part of settings.
2. Include the style.css contents in a <style> tag in the header section of Code Injection. (And change styles however)
3. To insert a page break, put an HTML comment <!-- page-break --> in the post.
4. Profit!

post-pages.js

$(document).ready(GeneratePagination);

var pages;

function GeneratePagination(){
    var targetDiv = ".post-content";
    //var content = document.getElementById(targetDiv);
    var content = $(targetDiv)[0]
    if (!content){ return false };
    pages = content.innerHTML.split(/<!-- page-break -->/g);
    var html = "";
    
    if (pages.length>1){
        for (var i=0;i<pages.length;i++){
            html +="<div  id=\"pagination_"+(i+1)+"\" class=\"pg_content\" style=\"display:none\">"+pages[i]+"</div>";
        }
        html+="<div class=\"pg_nav\">";
        html+="<div class=\"pg_next\"><a href=\"#2\" onclick=\"ShowPage(this);\">Next Page</a></div>"
        for (var i=0;i<pages.length;i++){
            html +="<div class=\"pg_button\" data-pagenum=\""+(i+1)+"\"><a href=\"#"+(i+1)+"\" onclick=\"ShowPage(this);\">"+(i+1)+"</a></div>";
        }
        html+="</div>";
        content.innerHTML = html;
        var initialPage = location.hash.substr(1) || 1
        ShowPage(initialPage)
    } else {
        return false;
    }
    function ShowPage(elem){
        var x;
        var mx = pages.length;
        if (!isNaN(parseInt(elem,10))){
            x = parseInt(elem, 10);
        } else if (typeof elem === "object" && $(elem).attr("href")) {
            x = parseInt($(elem).attr("href").substr(1));
        }
        if (!x || x > mx){ // if nonsensical x, just show first page
            location.hash = "";
            x = 1;
        }
        if ($(elem).parent().hasClass("active")){ return false; }
        $(".pg_content").hide();
        $(".pg_button").removeClass("active");
        $(".pg_button[data-pagenum='"+x+"']").addClass("active");
        
        // hide/show next page button, and update url
        if (mx > 1 && x < mx){
            $(".pg_next").show();
        } else {
            $(".pg_next").hide();
        }
        setTimeout(function(){
            $(".pg_next a").attr("href", "#"+(x+1))
        }, 1);
        window.scrollTo(0,0);
        $("#pagination_"+x).show();
    }
    $(window).on('hashchange', function(){
        var pagenum = window.location.hash.substr(1)
        if (!isNaN(pagenum)){
            ShowPage(window.location.hash.substr(1));
        }
    })
}

style.css

.pg_button.active a {
  color: #4A4A4A;
  transition: none;
  text-decoration: none;
  cursor: default;
}
.pg_button {
    display: inline;
    margin-right: 20px;
}
.pg_next:after {
    content: " ->";
}
.pg_next {
    font-size: 2rem;
}