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

7 min read - May 15, 2020

How Much Does it Cost to create a Video Conferencing App like Zoom

Running out of money during production is something that you don’t want. Read our blog to know how much it...

19 min read - May 14, 2021

Why Should You Create a Prototype for Your Startup Idea?

Creating a prototype is your best bet for startup success. Learn more about prototypes and how they help your startup.

9 min read - Jan 25, 2023

Bespoke Software Development: Everything You Need To Know

Custom software development can help businesses create curated experiences for customers. Learn more about bespoke development and its feasibility for...

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!