Skip to content

Customise Ghost CMS

Everything you need to know to empower your blogs with Ghost CMS.

cmsProduct Development
Jan 30, 2017
2 min read

faiz.m

Customise Ghost CMS

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 customise ghost blogs with more powerful block features.

To start off with we include the handlebars template 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 anymore from ghost.

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

Checkout the custom Ghost CMS in action at Github.

Pushing the Boundaries of Digital Engineering

Submit your email to get all the top blogs, insights and guidance your business needs to succeed!

Related Blogs

11 min read - Apr 21, 2021

7 Steps of the Product Development Process

The seven steps of product development that can help any business develop a top tier product.

11 min read - Jan 08, 2023

Outsourcing SaaS Product Development: A Non-tech Founder’s Guide

Outsourcing the development of your SaaS product can be a cost-effective and efficient way to bring your product to market....

8 min read - Aug 11, 2021

Types of IT Outsourcing Models to Grow Your Startup and How to Pick the Best One

Outsourcing plays a vital role in successful software projects. Understand them to make better decisions about outsourcing.

View all

OUR OFFICE

India

Pattom, Trivandrum, India, 695 004

Usa

7533 S CENTER VIEW CT # 4592, WEST JORDAN, UT 84084 US

Uk

208, Uxbridge RD, Shepherd’s Bush W12 7JD, UK

Let’s talk! We’re ready

Start your digital transformation journey with us now!