jquery.ghostrelated

This jQuery plugin displays a list of related posts for the Ghost blogging platform.

How it works

Ghost Related parses your blogs rss feed and matches the current post with posts from your blog that have any tags in common. You will need to attach the plugin to an unordered or ordered list in your post.hbs template to output the related posts

Installation

1. Download jquery.ghostrelated.js or jquery.ghostrelated.min.js and save it to the js folder in your theme directory.
2. Include the script below {{ghost_foot}} in your themes default.hbs file <script src="/assets/js/jquery.ghostrelated.min.js"></script>

{{! Ghost outputs important scripts and data with this tag (jquery is included in ghost_foot) }}
{{ghost_foot}}

<script type="text/javascript" src="/assets/js/main.js"></script> <script type="text/javascript" src="/assets/js/ghostrelated.min.js"></script>

3. Add an ordered or unordered list with a class identifier (related-posts is the default class identifier) in your post.hbs template file.

    <ul class="related-posts">
    </ul>
</footer>
{{/post}}

4. Call the ghostrelated plugin on the list class identifier that you created in step 3 somewhere in your main js file

$('.related-posts').ghostRelated();

Options

The theme has some default options defined for you. Based on your theme you may need to override some of these when you initiate the plugin

defaults = {
    feed: '/rss',
    titleClass: '.post-title',
    tagsClass: '.post-meta',
    debug: false,
    template: '<li><a href="{url}">{title}</a></li>',
    messages: {
        noRelated: 'No related posts were found.'
    }
}

feed:

This is the location of the rss feed for your blog. Ghost uses /rss, so you shouldn't need to change this.

titleClass:

This is the class identifier for the heading element for your single post title. This makes sure that the post that is currently being read does not come back as a related post.

Ghost's default casper theme uses: <h2 class="post-title">Title of current post</h2> by default.

tagsClass:

This is the class identifier for the element that the current post tags are in. This is used to grab the current post tags and match them against other posts.

It looks like this in casper:

<span class="post-meta">
    <time datetime="2014-07-03">03 Jul 2014</time> on 
    <a href="/tag/getting-started/">Getting Started</a> | 
    <a href="/tag/another-tag/">Another Tag</a>
</span>

So the option uses .post-meta and the plugin looks for the anchor tags inside of it

limit:

Limit amount of related posts to be displayed

debug:

If the plugin isn't returning any related posts, set this option to true. This option will output error information to the list you created to help you figure out why the plugin is failing.

template:

Specify the template for the related posts. You have access to all variables within the post object from the RSS feed, and you can echo them by wrapping them in braces.

Start with custom options

$('.related-posts').ghostRelated({
    titleClass: '.my-title',
    tagsClass: '.my-tags-class',
    template: '<a href="{url}" class="panel panel-default"><div class="panel-heading">{title}</div></div>'
});

Roadmap

• More advanced post matching

Browser Support

This plugin officially supports IE9+. You can include this polyfill in your theme for any browsers that don't support the JavaScript forEach() funciton.

Credits

• Inspired by jquery.ghostHunter - an amazing search plugin for Ghost