Skip to main content

Enabling link post types in Ghost

26 May, 2014

A simple-to-use method for getting link posts working on your Ghost blog.

Having spent last weekend building my own static site generator for the new RoaringApps blog, I still wasn't happy with the process of writing new posts – it was rather involved, limited me to writing on one computer and risked me breaking something in the site's code base. So I started from scratch and decided to setup Ghost.

While Ghost is still in the early stages (current version is 0.4.2), the product looks solid and hopefully it will turn into a great blogging platform. Given it's so young, however, inevitably there are features that have not yet been implemented – one of which is differentiating between post types. Currently, you are limited to simple blog posts. That's it. I'd already decided I'd like to delve into link posts on RoaringApps, so I needed a way to make Ghost understand them.

An example link post

Breaking it down, a link post consists of two distinct features: a way to differentiate it from normal posts (so that you can style it separately), and a way to define the link.

I decided the easiest way to define a link without having to worry about implementing a new UI element would be as a HTML comment (<!-- -->). To parse out the comment and get the link, we need to define a new Handlebars helper in Ghost's code base. I played around with a couple of different implementations, and decided on the following. This helper serves two functions: identify the post as a link post, and provide the link itself.

coreHelpers.link = function (options) {  
    var txt = this.html,
        hasLink = txt.indexOf('<!-- link[') >= 0;

    if(hasLink) {
        this.theLink = txt.substring(txt.indexOf('<!-- link[') + 10, txt.indexOf('] -->', txt.indexOf('<!-- link[')));
        return options.fn(this);
    }
    else {
        return options.inverse(this);
    }
};

registerThemeHelper('link', coreHelpers.link);  

(This code is located in the ghost/core/server/helpers/index.js file.)

Then, in the theme's index.hbs and post.hbs files, I have the following for differentiating link post types:

{{#foreach posts}}
    <div class="post {{post_class}} {{#link}}link-post{{/link}}">
        <h4><a href="{{#link}}{{theLink}}{{else}}{{url}}{{/link}}">{{title}}</a></h4>
        <div class="post-content">
            {{excerpt}}
        </div>
    </div>
{{/foreach}}

The link-post class makes it easy to style the link post differently, and within the {{#link}} block, you can use {{theLink}} to get the link itself.

And with that, making a link post in Ghost is as simple as adding a HTML comment to your post content:

<!-- link[http://example.com] -->

And here's a little quip about example.com that will appear as the body of the post.  

There are myriad ways in which this could be improved, but for me it's a quick and simple solution to a problem that I'm sure will be solved in a future release of Ghost.

Comments
comments powered by Disqus

RoaringApps crowd-sources real-time application compatibility information for macOS, iOS and Windows.

Recent blog posts