Search code examples
handlebars.jsmetalsmith

register custom handlebar helper in metalsmith


I am using Metalsmith to generate a static site from a markdown file.

The people editing the markdown file will write: {{{link "docs/file.docs"}}} and they expect a link on the site with that file (relative link)

The helper is simple, I tested and it is working:

handlebars.registerHelper('link', function(path) {
  var url = handlebars.escapeExpression(path);

  return new handlebars.SafeString(
    "<a href='" + url + "'>" + url + "</a>"
  );
});

But how can I add this helper and use it in my metalsmith configuration?

Here is a summarised example.
index.md:

etc etc link to the page is {{{link "docs/file.doc"}}}

I want with a simple make the following part of the html to be created:

etc etc link to the page is <a href='docs/file.doc'>docs/file.doc</a>

Solution

  • I found the answer here: https://segment.com/blog/building-technical-documentation-with-metalsmith/

    Here is my index.js config for Metalsmith:

    var Metalsmith  = require('metalsmith');
    var markdown    = require('metalsmith-markdown');
    var permalinks  = require('metalsmith-permalinks');
    var handlebars = require('handlebars');
    var inplace = require('metalsmith-in-place');
    
    handlebars.registerHelper('link', function(path) {
      var url = handlebars.escapeExpression(path);
    
      return new handlebars.SafeString(
        "<a href='" + url + "'>" + url + "</a>"
      );
    });
    
    Metalsmith(__dirname)
      .metadata({ title: "Static Site" })
      .source('./src')
      .destination('/var/www')
      .use(inplace({ engine: 'handlebars', pattern: '**/*.md' }))
      .use(markdown())
      .build(function(err, files) {
        if (err) { throw err; }
      });