node package manager

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.

(TOC generated by verb using markdown-toc)

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 = {
  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 ['{{', '}}']
  • 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.
  • layouts {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, layouts, options, fn);

v0.11.0

  • All view objects must now have a path property, following vinyl conventions.
  • assemble: Assemble is a powerful, extendable and easy to use static site generator for node.js. Used… more | homepage
  • gulp: The streaming build system | homepage
  • handlebars-layouts: Handlebars helpers which implement layout blocks similar to Jade, Jinja, 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: A virtual file format | 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 © 2016 Brian Woodward Released under the MIT license.


This file was generated by verb on January 21, 2016.