Theme Development: Adding Custom Pen Helpers
For the techno theme, I wanted to make custom helpers and settings available to users. To do this, I applied an override to [ghost root] /index.js.
The code below looks for index.js in the current theme folder and runs it.
var ghost = require('./core'),
errors = require('./core/server/errorHandling');
ghost()
.then(function (param) {
var settings = require('./core/server/api').settings;
settings
.read({key: 'activeTheme', context: {internal: true}})
.then(function (result) {
try {
require('./content/themes/' + result.value + '/index')();
}
catch (e) {
//No custom index found, or it wasn't a proper module.
}
});
})
.otherwise(function (err) {
errors.logErrorAndExit(err, err.context, err.help);
});
The index.js theme level injects custom blog variables (from the config file) and hb helpers.
var hbs = require('express-hbs'),
_ = require('lodash'),
downsize = require('downsize'),
blogVariable = require('../../../core/server/config/theme');
module.exports = function() {
//This block allows configuration to be available in the hb templates.
var blogConfig = blogVariable();
var config = require('./config') || {};
blogConfig.theme = config;
//console.log(JSON.stringify(blogConfig));
////Custom hb helpers////
hbs.registerHelper('excerpt', function (options) {
...
return new hbs.handlebars.SafeString(excerpt);
});
...
};
Below is an example of using custom variables on a blog.
<ul class="list-inline">
<li><a href="{{@blog.theme.author.github}}" class="btn-social btn-outline" data-toggle="tooltip" data-placement="top" title="Github"><i class="fa fa-fw fa-github"></i></a>
</li>
...
Is there a better way to do this in Ghost 0.4.2? I don't like it when users override the main core index.js file.
source to share
There is a blog post explaining how to do this only by modifying the file config.js
and adding the file to the root directory. I agree with the author that this is likely to be proof of an update. http://zackehh.com/safely-creating-custom-handlebars-helpers/
Add to
require('./helpers')();
To the begining config.js
And add helpers to your file helpers.js
like this:
var hbs = require('express-hbs');
module.exports = function(){
hbs.registerHelper('json', function(context) {
return JSON.stringify(context);
});
};
source to share
Unfortunately there was not, there was a post about this a bit recently on the forums, however you can add your own helpers.js file in the main folder, for example ...
var hbs = require('express-hbs')
// quick function for an example
registerHelper = function(){
hbs.registerHelper('ifNthItem', function(nthItem, currentCount, offset, options) {
if((currentCount+ offset)%(nthItem) == 0) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
};
module.exports = registerHelper;
Then just pair this with index.js
var when = require('when'),
bootstrap = require('./bootstrap'),
scopa = require('./helpers');
scopa();
At least in this way, you are not changing the main index.js, but instead of helpers.js.
source to share