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