A metalsmith plugin for nesting your layouts when using the handlebars engine.
This plugin extends metalsmith-layouts when using the handlebars layout engine
and recursively combines (nests) layouts in parent-child relationships.
Simple enough it might also work with other layout engines.
$ npm install --save metalsmith-nestedChild layouts are nested inside parent layouts replacing the
{{{contents}}}expression.
Configuration in metalsmith.json:
{
"plugins": {
"metalsmith-nested": {
"directory": "nested",
"generated": "layouts"
},
"metalsmith-layouts": {
"engine": "handlebars"
}
}
}Source Page src/page.html:
---
layout: child.html
heading: Page Heading
title: Page Title
---
<p>Page contents</p>Child Layout nested/child.html:
---
layout: parent.html
---
<h1>{{heading}}</h1>
{{{contents}}}Parent Layout nested/parent.html:
<!doctype html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
{{{contents}}}
</body>
</html>Results in layouts/child.html:
<!doctype html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<h1>{{heading}}</h1>
{{{contents}}}
</body>
</html>Results in build/page.html:
<!doctype html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Heading</h1>
<p>Page contents</p>
</body>
</html>It is possible to combine (nest) multiple layouts.
Copy the example directory outside of the metalsmith-nested package
$ cp -rf example ../exampleNavigate to the example directory
$ cd ../exampleInstall the dependencies
$ npm installBuild the site
$ node buildThe following build script uses the default values for all packages
except that handlebars is specified as the layout engine.
[build.js]
const
Metalsmith = require('metalsmith'),
handlebars = require('handlebars'),
layouts = require('metalsmith-layouts'),
nested = require('metalsmith-nested');
Metalsmith(__dirname)
.source('src')
.destination('build')
.use(nested({
directory: 'nested',
generated: 'layouts'
}))
.use(layouts({
engine: 'handlebars',
directory: 'layouts'
}))
.build(function(err) {
if (err) throw err;
});the above is the same as
[build.js]
const
Metalsmith = require('metalsmith'),
handlebars = require('handlebars'),
layouts = require('metalsmith-layouts'),
nested = require('metalsmith-nested');
Metalsmith(__dirname)
.use(nested())
.use(layouts('handlebars'))
.build(function(err) {
if (err) throw err;
});The important thing to know is that the directory for metalsmith-nested
is the source directory of pre-nested layouts and the generated directory
is the output of combined (nested) layouts.
The output of metalsmith-nested is the input of metalsmith-layouts
Other options are pattern and default which should behave the same as in metalsmith-layouts.
See metalsmith-layouts and
multimatch for full documentation.
directory: 'nested',
generated: 'layouts',
pattern: '**/*',
default: ''MIT