A metalsmith plugin which will section your html content into metadata properties. Its ideal for single page sites with multiple content blocks.
It can strip out sections of html from metadata.contents and make them accessible in your templates via their name. Additionally it can produce arrays of sections for iteration.
$ npm install metalsmith-section
Use section after markdown.
var Metalsmith = require('metalsmith');
var markdown = require('metalsmith-markdown');
var section = require('metalsmith-section');
Metalsmith(__dirname)
.use(markdown())
.use(section())
.build();You can make sections by adding a line with the name of your section e.g. section:::mySection. You will find you section in the metaData under sections.mySection if you haven't changed any of the options. See example below or example folder for more details.
You can make arrays of sections by simply giving 1 or more sections the same name. If metalsmith-section encounters multiple sections with the same name it will compile them in to a list. A list is simply an array of sections which can later be iterated. See example below or example folder for more details.
Pass an options object
const options = {
pattern: "*",
prefix: "section:::",
removeFromContents: false,
metaDataKey: 'list'
}The file path pattern to match agains
default is **/*.html
The section name prefix used to split the sections, this will be removed from the html
default is "section:::"
Should the sections be removed from the metaData.contents
default is true
The name of the metaData property that the sections will be stored in
default is "sections"
Javascript
var Metalsmith = require('metalsmith');
var section = require('metalsmith-section');
var layouts = require('metalsmith-layouts');
var markdown = require('metalsmith-markdown');
Metalsmith(__dirname)
.source('./resources')
.destination('./build')
.use(markdown())
.use(section())
.use(layouts({
engine: 'handlebars',
pattern: "**/*.html"
}))Markdown
You can make sections by adding a line with the name of your section e.g. section:::mySection. You will find you section in the metaData under sections.mySection if you haven't changed any of the options. If metalsmith-section encounters multiple sections with the same name it will compile them in to a list. A list is simply an array of sections which can later be iterated.
---
layout: index.hbs
---
# Hello World!
This is my page contents
section:::about
---
## About me
I am human
section:::list
---
red
section:::list
---
green
section:::list
---
blue
Handlebars template
<!doctype html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
{{{contents}}}
<hr/>
{{{sections.about}}}
<h2>Colors I like</h2>
<ul>
{{#each sections.list}}
<li>{{{this}}}</li>
{{/each}}
</ul>
</body>
</html>Built html
<!doctype html>
<html>
<head>
<title>metalsmith-section example</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my page contents</p>
<hr/>
<h2>About me</h2>
<p>I am human</p>
<h2>Colors I like</h2>
<ul>
<li><p>red</p></li>
<li><p>green</p></li>
<li><p>blue</p></li>
</ul>
</body>
</html>