Wraps templates with layouts. Layouts can use other layouts and be nested to any depth. This can be used 100% standalone to wrap any kind of file with banners, headers or footer content. Use for markdown, HTML, handlebars views, lo-dash templates, etc. La
Wraps templates with layouts. Layouts can use other layouts and be nested to any depth. This can be used 100% standalone to wrap any kind of file with banners, headers or footer content. Use for markdown, HTML, handlebars views, lo-dash templates, etc. Layouts can also be vinyl files.
(TOC generated by verb using markdown-toc)
Install with npm:
$ npm install --save layouts
var renderLayouts = require('layouts');
Basic example
In this example, two layouts are used:
one, will wrap the stringtwo, will wrap the first layoutvar layouts = {
one: {content: 'one before\n{% body %}\none after', layout: 'two'},
two: {content: 'two before\n{% body %}\ntwo after'},
};
// `one` is the name of the first layout to use on the provided string
renderLayouts('<div>Wrap me with a layout!!!</div>', 'one', layouts);
Results in:
two before
one before
<div>Wrap me with a layout!!!</div>
one after
two after
HTML
This example shows how to use nested HTML layouts to wrap content:
var layouts = {};
layouts.base = {
path: 'base.tmpl',
content: [
'<!DOCTYPE html>',
'<html lang="en">',
' <head>',
' <meta charset="UTF-8">',
' <title>Home</title>',
' </head>',
' <body>',
' {% body %}',
' </body>',
'</html>',
].join('\n')
};
// this `nav` layout will be wrapped with the `base` layout
layouts.nav = {
path: 'nav.tmpl',
layout: 'base',
content: '<nav>\n{% body %}\n</nav>'
};
// this string will be wrapped with the `nav` layout
var str = [
'<ul class="categories">',
' <li class="active"> <a href="#"> Development </a> </li>',
' <li> <a href="#"> Design </a> </li>',
' <li> <a href="#"> Node.js </a> </li>',
'</ul>'
].join('\n')
// `nav` is the name of the layout to use
renderLayouts(str, nav, layouts);
Results in something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<nav>
<ul class="categories">
<li class="active"> <a href="#"> Development </a> </li>
<li> <a href="#"> Design </a> </li>
<li> <a href="#"> Node.js </a> </li>
</ul>
</nav>
</body>
</html>
By default, {% body %} is used as the placeholder (insertion point) for content, but this can easily be customized with the following options:
layoutDelims: the delimiters to use. This can be a regex, like /\{{([^}]+)\}}/, or an array of delimiter strings, like ['\{{', '}}']contentTag: the name of the content placeholder tag (defaults to body).Apply a layout from the layouts object to file.contents. Layouts will be recursively applied until a layout is not defined by the returned file.
Params
file {Object}: File object. This can be a plain object or vinyl file.layouts {Object}: Object of file objects to use as "layouts".options {Object}returns {Object}: Returns the original file object with layout(s) applied.Example
var applyLayouts = require('layouts');
var layouts = {};
layouts.default = new File({path: 'default', contents: new Buffer('foo\n{% body %}\nbar')}),
layouts.other = new File({path: 'other', contents: new Buffer('baz\n{% body %}\nqux')});
layouts.other.layout = 'default';
var file = new File({path: 'whatever', contents: new Buffer('inner')});
file.layout = 'other';
applyLayouts(file, layouts);
console.log(file.contents.toString());
// foo
// bar
// inner
// baz
// qux
Breaking changes
layoutHistory to layoutStacklayoutStack are now the actual layout object, instead of the layout nameAdded
fn(file, layout).Breaking changes
layouts() function now expects a file object as the first argument. This can be an object with path, layout and contents properties, or a valid vinyl file. See the API docs for more details.Breaking changes
options.tag to options.contentTagHousekeeping
assert instead of shouldpath property, following vinyl conventions.You might also be interested in these projects:
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
| Commits | Contributor |
|---|---|
| 131 | jonschlinkert |
| 26 | doowb |
(This project's readme.md is generated by verb, please don't edit the readme directly. Any changes to the readme must be made in the .verb.md readme template.)
To generate the readme, run the following command:
$ npm install -g verbose/verb#dev verb-generate-readme && verb
Running and reviewing unit tests is a great way to get familiarized with a library and its API. You can install dependencies and run tests with the following command:
$ npm install && npm test
Brian Woodward
Copyright © 2017, Brian Woodward. Released under the MIT License.
This file was generated by verb-generate-readme, v0.6.0, on August 07, 2017.
FAQs
Wraps templates with layouts. Layouts can use other layouts and be nested to any depth. This can be used 100% standalone to wrap any kind of file with banners, headers or footer content. Use for markdown, HTML, handlebars views, lo-dash templates, etc. La
We found that layouts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.