Ghost CMS on Steroids with Custom block Helpers

Faiz Mohamed Haneef's Picture
January 30, 2017

Ghost core has limited extension points when coming to adding new properties for blogs. When compared to Wordpress it lacks the Custom Post types and Meta extension properties.

However, use handlebars helpers, we could customize ghost blogs with more powerful block features.

To start off with we include the handlebars tempalate in the config.js
note: This file may be overwritten during Ghost updates

config.js

require('./hbs_helper_bl')();  
var path = require('path'),  
    config;
...
...

hbs_helper_bl.js

var hbs = require('express-hbs');

module.exports = function() {  
  hbs.registerHelper('bl', function (node, post) {
    var content = post.data.root.post.html
    var regexstring = '<bl_' + node + '>[\\s\\S]*?<\/bl_' + node + '>'
    var regexp = new RegExp(regexstring, "gm");
    if(content.match(regexp)){
      var match = content.match(regexp)[0]
      match = match.replace('<bl_' + node + '>', '');
      match = match.replace('</bl_' + node + '>', '');
      return new hbs.SafeString(match)
    } else {
      return ''
    }
  });
  hbs.registerHelper('if_eq', function(a, b, opts) {
    if (a == b) {
      return opts.fn(this);
    } else {
      return opts.inverse(this);
    }
});
};

In your ghost editor, created different blocks of bl_ for different posts. Anything that goes inside each block is not written to your output html unless called via block helpers

<bl_title>  
Title goes here  
</bl_title>  
___  
<bl_slider>  
Slider Content goes here  
</bl_slider>  
___

<bl_anything>  
Any custom content goes here  
</bl_anything>  

In your page/post template, say post.hbs you can selectively get the contents of each block using the below helper. Make sure you don't use {{content}} context helper any more from ghost

<h1>{{bl 'title'}}</h1>  
<p>{{bl 'slider'}}</p>  

Checkout custom Ghost CMS in action at Github