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 26, 2022

20 Product Development FAQs to Remember in 2023

These handpicked FAQs are expert answers to the most prominent questions in the minds of entrepreneurs.

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...

11 min read - Mar 23, 2023

SaaS Marketing: Best Practices For Customer Acquisition And Retention

Discover the best practices for marketing your SaaS product and learn how to acquire and retain customers effectively. From targeting...

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!