Reshape Layouts
Layout inheritance using block
and extend
, inspired by (jade/pug).
Installation
npm i reshape-layouts --save
Usage
Let's say we have a base template:
base.html
Default Title footer content
Now we can inherit this template. All defined blocks inside <extends>
will
replace the blocks with the same name in the parent template. If the block is not defined inside <extends>
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:
const reshape = const layouts = const html = '<extends src="base.html">' + '<block name="title"><title>How to use reshape-layouts</title></block>' + '<block name="content">Read the documentation</block>' '</extends>'
The final HTML will be:
How to use reshape-layouts Read the documentation footer content
Append & Prepend
It's also possible to append and prepend block's content
const reshape = const layouts = const html = '<extends src="base.html">' + '<block name="title" type="prepend">How to use reshape-layouts</block>' + '<block name="content">Read the documentation</block>' + '<block name="footer" type="append">— 2016</block>' '</extends>'
The final HTML will be:
How to use reshape-layouts — Github Read the documentation footer content — 2016
Caveats
There are a number of tags that have their contents parsed as plaintext and cannot contain nested html tags. If you place a block
tag inside any of these elements, it will not behave as expected, and instead will be rendered as plaintext. These are the tags that are content-only: title
, noscript
, noframes
, style
, script
, xmp
, iframe
, noembed
.
Options
All options are optional, none are required.
Name | Description | Default |
---|---|---|
root | root to resolve layout paths from | reshape filename option |
encoding | encoding with which to read layout files | utf8 |
Reporting Dependencies
This plugin will report its dependencies in the standard format as dictated by reshape-loader if you pass dependencies: []
as an option to reshape when it runs. Dependencies will be available on the output object under the dependencies
key. For example:
const reshape = const include =
If you are using this with webpack, reshape-loader takes care of the dependency reporting and you don't have to do anything 😁
License & Contributing
- Licensed under MIT
- See the contributing guide