ejs-layout-chain

ejs-layout-chain

Layout chain support for ejs in express 4.x

Installation

$ npm install ejs-layout-chain

Usage

var express = require('express');
var ejsLayoutChain = require('ejs-layout-chain');

var app = express();

app.set('view engine', 'ejs');

app.use(ejsLayoutChain);

app.get('/', function(req, res) {
  var locals = {
    title: 'Page Title',
    description: 'Page Description',
    header: 'Page Header',
    layout: 'layout>category'
  };
  res.render('news', locals);
});

app.listen(3000);

contentFor

For example, consider this view:

foo
<%- contentFor('pageSectionA') %>
bar
<%- contentFor('pageSectionB') %>
baz

Using it with this layout:

<div class="header"><%- pageSectionA %></div>
<div class="body"><%- body %></div>
<div class="footer"><%-defineContent('pageSectionB')%></div>

Will render:

<div class="header">bar</div>
<div class="body">foo</div>
<div class="footer">baz</div>

Notice that the difference between using <%- pageSectionA %> and <%-defineContent('pageSectionA')%> is that the former will generate an error if the view doesn't define content for this section.

Layout chain

If you want to specify the layout you want to render a view in, instead of specifying one layout, you can specify a layout chain like 'layout1>layout2', this will render view as body of layout2, then layout2 as body of layout1.

For example, consider this view:

foo
<%- contentFor('pageSectionA') %>
bar
<%- contentFor('pageSectionB') %>
baz

Using it with layout1:

<div class="layout1-header"><%- pageSectionA %></div>
<div class="layout1-body"><%- body %></div>
<div class="layout1-footer"><%-defineContent('pageSectionB')%></div>

layout2:

<div class="layout2-header"><%- pageSectionA %></div>
<div class="layout2-body"><%- body %></div>
<div class="layout2-footer"><%-defineContent('pageSectionB')%></div>
<%- contentFor('pageSectionA') %>
<%- pageSectionA %>
<%- contentFor('pageSectionB') %>
<%-defineContent('pageSectionB')%>

as:

  res.render('view', {layout: 'layout1>layout2'});

Will render:

<div class="layout1-header">bar</div>
<div class="layout1-body">
  <div class="layout2-header">bar</div>
  <div class="layout2-body">foo</div>
  <div class="layout2-footer">baz</div>
</div>
<div class="layout1-footer">baz</div>

Running tests

Clone the rep and run:

$ make test

License

MIT