Search code examples
javascriptnode.jshandlebars.jsmetalsmith

Can't make metalsmith-layouts and metalsmith-in-place work


I try to make me a boilerplate with metalsmith using some plugins but I can't make metalsmith-layouts and metalsmith-in-place work together. I tried many things and I succeed to make one of them work but never the second using a template engine (for instance handlebars). It seems like metalsmith-layouts doesn't want to read files in .hbs.

I have properly installed handlebars ans jstransform-handlebars (and .hbs files gets properly transformed by metalsmith-in-place but can't make it work with metalsmith layouts ... And this is really annoying).

My goal is to use a layout file in which the content will be rendered using a template engine like handlebars.

Here is my index.js code :

const path = require('path');
const metalsmith = require('metalsmith');
const inPlace = require('metalsmith-in-place');
const layouts = require('metalsmith-layouts');
const assets = require('metalsmith-assets');
const sass = require('metalsmith-sass');
const htmlMinifier = require("metalsmith-html-minifier");
const permalinks = require('metalsmith-permalinks');

metalsmith(__dirname)  
    .source('src')
    .destination('dist')
    .use(sass({
        file: './src/scss/*.scss',
        outputDir: "css/"
    }))
    .use(inPlace())                             //Template engine uses Handlebars
    .use(layouts({
         engine: 'handlebars',
         default: "layout.html.hbs"
    }))    
    .use(htmlMinifier())
    .use(permalinks({
        relative: false,
        pattern: ':url'
    }))    
    .use(assets({
        source: 'assets'
    }))
    .build((err) => err && console.error(err)); 

And here is my directory:

source file tree


Solution

  • I finally came to the conclusion that the layout file MUST be a .html file. The content of its html file is processed with the engine specified in the

    .use(layouts({
        engine: handlebars
    }))
    

    despite the file isn't a .hbs file in this format which is quite confusing. The in-place plugin is useful to use template engine for contents pages.