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

8 min read - Sep 22, 2022

Why No Code Is No-Good for Many Software Products [Drawbacks]

Understanding no code applications help in deciding where they can be used best in production environments. Read more about the...

25 min read - Feb 14, 2022

35 Best Profitable Tech Startup Ideas for Beginners [With Examples]

35+ actionable & promising startup ideas that you can try out right now at an affordable cost.

14 min read - Mar 25, 2022

How to Create an App in 2022: Make an App in 9 Easy Steps

Developing an app from scratch has now become easier than ever. Find out how to create a mobile app in...

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!