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. La

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.

Install with npm

$ npm i layouts --save
var renderLayouts = require('layouts');

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 after

HTML

This example shows how to use nested HTML layouts to wrap content:

var layouts = {};
 
layouts.base = {
  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 = {
  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 ['{{', '}}']
  • tag: the name of the placeholder tag.

renderLayouts

Wrap one or more layouts around string.

Params

  • string {String}: The string to wrap with a layout.
  • layoutName {String}: The name (key) of the layout object to use.
  • layoutStack {Object}: Object of layout objects.
  • options {Object}: Optionally define a defaultLayout (string), pass custom delimiters (layoutDelims) to use as the placeholder for the content insertion point, or change the name of the placeholder tag with the tag option.
  • fn {Function}: Optionally pass a function to modify the context as each layout is applied.
  • returns {String}: Returns the original string wrapped with one or more layouts.

Example

renderLayouts(string, layoutName, layoutStack, options, fn);
  • assemble: Static site generator for Grunt.js, Yeoman and Node.js. Used by Zurb Foundation, Zurb Ink, H5BP/Effeckt,… more | homepage
  • handlebars-helpers: 120+ Handlebars helpers in ~20 categories, for Assemble, YUI, Ghost or any Handlebars project. Includes… more | homepage
  • template: Render templates using any engine. Supports, layouts, pages, partials and custom template types. Use template… more | homepage
  • template-helpers: Generic JavaScript helpers that can be used with any template engine. Handlebars, Lo-Dash, Underscore, or… more | homepage
  • verb: Documentation generator for GitHub projects. Extremely powerful, easy to use, can generate anything from API… more | homepage

Install dev dependencies:

$ npm i -d && npm test

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Brian Woodward

Copyright © 2014-2015 Brian Woodward Released under the MIT license.


This file was generated by verb-cli on August 21, 2015.