Templates extending (Jade-like)
npm install posthtml-extendPostHTML plugin that allows a template to extend (inherit) another templates (Jade-like).
base.html
``xml
Now we can inherit this template. All defined blocks inside
will
replace the blocks with the same name in the parent template. If the block is not
defined inside its content in the parent template remains the same.In the example the blocks
title and content will be replaced and
the block footer will remain unchanged:
`js
var posthtml = require('posthtml');
var html = ;posthtml([require('posthtml-extend')({
encoding: 'utf8', // Parent template encoding (default: 'utf8')
root: './' // Path to parent template directory (default: './')
})]).process(html).then(function (result) {
console.log(result.html);
});
`The final HTML will be:
`xml
How to use posthtml-extend
Read the documentation
`
$3
It's also possible to append and prepend block's content:
`js
var posthtml = require('posthtml');
var html = ;posthtml([require('posthtml-extend')()]).process(html).then(function (result) {
console.log(result.html);
});
`The final HTML will be:
`xml
How to use posthtml-extend — Github
Read the documentation
`$3
In addition to normal html content you can also pass data as a json object to your layout file. To do this add a
locals attribute to your and pass a json string.Like this:
`js
var posthtml = require('posthtml');
var html = ;
posthtml([require('posthtml-extend')()]).process(html).then(function (result) {
console.log(result.html);
});
`Now you can easily access your data inside of your
base.html: `xml
How to use posthtml-extend — Github
`The final HTML will be:
`xml
How to use posthtml-extend — Github
Read the documentation
`expressions.Options
$3
Type:
string\
Default: utf8The encoding of the parent template.
$3
Type:
array\
Default: []You can include other PostHTML plugins in your templates.
Here is an example of using posthtml-expressions, which allows to use variables and conditions:
`js
var posthtml = require('posthtml');
var options = {
plugins: [
require('posthtml-expressions')({ locals: { foo: 'bar'} })
]
};
var html =
;posthtml([require('posthtml-extend')(options)]).process(html).then(function (result) {
console.log(result.html);
});
`The final HTML will be:
`xml
How to use posthtml-extend — Github
content value foo equal bar
`$3
Type:
string\
Default: ./The path to the root template directory.
$3
Type:
boolean\
Default: trueWhether the plugin should disallow undeclared block names.
By default, the plugin raises an exception if an undeclared block name is encountered. This can be useful for troubleshooting (i.e. detecting typos in block names), but
there are cases where "forward declaring" a block name as an extension point for downstream templates is useful, so this restriction can be lifted by setting the
strict
option to a false value:`js
const extend = require('posthtml-extend');const root = './src/html';
const options = { root, strict: false };
posthtml([extend(options)]).then(result => console.log(result.html));
`$3
Type:
string\
Default: blockTag names used to match a content block with a block for inserting content.
base.html
`xml
— Github
``js
var posthtml = require('posthtml');
var html = ;posthtml([require('posthtml-extend')({
slotTagName: 'slot',
fillTagName: 'fill'
})]).process(html).then(result => console.log(result.html));
`The final HTML will be:
`xml
How to use posthtml-extend
Read the documentation
`$3
Type:
string\
Default: extendsThe tag name to use when extending.
`js
var posthtml = require('posthtml');
var html = ;posthtml([require('posthtml-extend')({
tagName: 'layout',
})]).process(html).then(result => console.log(result.html));
`The final HTML will be:
`html
Using a custom tag name
Read the documentation
`$3
Type:
object\
Default: {}This option accepts an object to configure
posthtml-expressions`.Head over to the full documentation for information on every available option.