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

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

7 min read - Nov 10, 2021

6 Simple Steps to Create Your Product Roadmap

Six crucial steps to cover while building your ideal product roadmap.

7 min read - Aug 12, 2022

5 Ways Startups Can Benefit From Custom Software Development

Developing custom software helps startups with endless flexibility and feature additions. Read more to understand the benefits of custom software...

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!