Wraps markdown files in a jade layout.
npm install spike-layout-loader:marked filter. See below.``jade
extends ${layout}
block ${block}
:marked
${content}
`
like so:`javascript
module.exports = {
posthtml: (ctx) => {
return {
defaults: [
jade({ filename: ctx.resourcePath })
]
}
},
matchers: {
html: '*/.(md|jade)',
},
module: {
preLoaders: [
{ test: /\.md$/, loader: 'layout-loader', layout: 'my-layout' }
]
},
}
`Configuration
Layout loader has two configuration options.1. The layout to extend. Defaults to markdown.
2. The block to override. Defaults to content.
Options can ether be a string or a function returning a string (called with the file path). Layout loader will check the following locations for configuration:
1. A property call
options on the loader object.
2. The loader object its self.$3
The following are valid configurations.`javascript
preLoaders: [
{ test: /\.md$/, loader: 'layout-loader', layout: 'my-layout' }
]
``javascript
preLoaders: [
{ test: /\.md$/, loader: 'layout-loader', layout: (path) => 'bingo' }
]
``javascript
preLoaders: [
{
test: /\.md$/,
loader: 'layout-loader',
options: {
layout: 'layout'
block: 'text'
}
}
]
`Using with front matter
Layout Load was primarily built to be used with spike-front-matter. Here is how to integrate the two.$3
`javascript
const FrontMatter = require('spike-front-matter')
let fm = new FrontMatter()module.exports = {
posthtml: (ctx) => {
return {
defaults: [
jade({ filename: ctx.resourcePath, page: fm.page, site: fm.site}),
]
}
},
plugins: [
fm
],
matchers: {
html: '*/.(md|jade)',
},
module: {
preLoaders: [
{ test: /\.md$/, loader: 'layout-loader', options: fm.page, layout: 'default' }
]
}
}
`$3
`javascript
const FrontMatter = require('spike-front-matter')
let fm = new FrontMatter()module.exports = {
posthtml: (ctx) => {
return {
defaults: [
jade({ filename: ctx.resourcePath, page: fm.page, site: fm.site}),
]
}
},
plugins: [
fm
],
matchers: {
html: '*/.(md|jade)',
},
module: {
preLoaders: [
{ test: /\.md$/, loader: 'layout-loader', layout: () => fm.page.layout }
]
}
}
``