Skip to content

Latest commit

 

History

History
57 lines (39 loc) · 1.38 KB

README.md

File metadata and controls

57 lines (39 loc) · 1.38 KB

OBSOLETE

This hack is now obsolete as next/prev links have been added to core!

ghost-next-prev-links

JavaScript hack for adding Next & Previous Post links to your Ghost theme. No changes to core required.

Thanks

Thanks to GitHub user jyek for his original gist. I cleaned up the code slightly and made some small improvements.

Instructions

Step 1 - Place jquery.ghost-next-prev-links.js in assets/js/

Step 2 - Insert this into post.hbs.

<section class="post-next-prev clearfix">
    <span id="curr-post-uuid" style="display: none;">{{uuid}}</span>
    <a class="next-post"></a>
    <a class="prev-post"></a>
</section>

Step 3 - Insert this into default.hbs.

<script type="text/javascript" src="{{asset "js/jquery.ghost-next-prev-links.js"}}"></script>

Step 4 - Insert this into your style.scss file. (You're using SASS, right?)

/* Next and Previous Post links */
 
.post-next-prev {
    padding: 3rem 0 0 0;
 
    * { display: none; }
    a { max-width: 50%; }
    
    .next-post {
        float: left;
 
        &:before { content: ''; }
    }
    .prev-post {
        float: right;
        text-align: right;
 
        &:after { content: ''; }
    }
}

Step 5 - Get off yer butt, modify core, and submit your changes to TryGhost!