Package Exports
- layouts
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (layouts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
layouts 
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
Install with npm:
$ npm install --save layoutsUsage
var renderLayouts = require('layouts');Examples
Basic example
In this example, two layouts are used:
- the first layout,
one, will wrap the string - the second layout,
two, will wrap the first layout
var 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 afterHTML
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>Customization
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).
API
layouts
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
// quxHistory
1.0.0
Breaking changes
- renames
layoutHistorytolayoutStack - layouts in
layoutStackare now the actual layout object, instead of the layout name
Added
- Adds support for a function as the last argument. If passed, the function is called on the file and each layout with this signature:
fn(file, layout).
0.13.0
Breaking changes
- The main
layouts()function now expects afileobject as the first argument. This can be an object withpath,layoutandcontentsproperties, or a valid vinyl file. See the API docs for more details.
0.12.0
Breaking changes
- change
options.tagtooptions.contentTag
Housekeeping
- update tests to use
assertinstead ofshould
0.11.0
- All view objects must now have a
pathproperty, following vinyl conventions.
About
Related projects
You might also be interested in these projects:
- assemble: Get the rocks out of your socks! Assemble makes you fast at creating web projects… more | homepage
- gulp: The streaming build system | homepage
- handlebars-layouts: Handlebars helpers which implement layout blocks similar to Jade, Jinja, Nunjucks, Swig, and Twig. | homepage
- inject-snippet: Inject a snippet of code or content into a string. | homepage
- templates: System for creating and managing template collections, and rendering templates with any node.js template engine… more | homepage
- verb: Documentation generator for GitHub projects. Verb is extremely powerful, easy to use, and is used… more | homepage
- vinyl: Virtual file format. | homepage
Contributing
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Contributors
| Commits | Contributor |
|---|---|
| 131 | jonschlinkert |
| 26 | doowb |
Building docs
(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 && verbRunning tests
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 testAuthor
Brian Woodward
License
Copyright © 2017, Brian Woodward. Released under the MIT License.
This file was generated by verb-generate-readme, v0.6.0, on August 07, 2017.