pug-layout

A module that gives you the possibility of loading a layout in variable

Install

npm install pug-layout

Usage

layout.pug:

div(foo="bar")
    block content

index.pug:

block content
    span= text

app.js:

var pl = require('pug-layout');
 
var layout = new pl.Layout('layout.pug');
 
layout.convertInFile('index.pug', 'index.html', {text: 'this is the content'});

And you will get this index.html:

<div foo="bar">
    <span>this is the content</span>
</div>

Load Mixin

You can load a file as a mixin, that means the content of the file can be used as mixin:

.includeMixin(filePath,mixinArgs,mixinName):

• mixinArgs: string containing arguments of the mixin, if multiple separate them with comma ,
• mixinName: the name of mixin (optional), if not provided the mixin will be named with its filename.

Ex:

pet.pug:

p
    div= type
    div= age

index.pug:

block content
    span= text
    +pet('dog',5)

app.js:

var pl = require('pug-layout');
 
var layout = new pl.Layout('layout.pug');
 
layout.includeMixin('pet.pug','type,age');
 
layout.convertInFile('index.pug', 'index.html', {text: 'this is the content'});

And now you will get index.html:

 
<div foo="bar"><span>this is the content</span>
  <p>
    <div>dog</div>
    <div>5</div>
  </p>
</div>

Include at Top

You can include a file at top of layout. Useful when you want to include multiple mixins from one file.

.includeAtTop(filePath):

Ex:

head.pug:

section.head I'm the header

app.js:

var pl = require('pug-layout');
 
var layout = new pl.Layout('layout.pug');
 
layout.includeMixin('pet.pug','type,age');
layout.includeAtTop('head.pug');
 
layout.convertInFile('index.pug', 'index.html', {text: 'this is the content'});

And now you will get index.html:

 
<section class="head">I'm the header</section>
<div foo="bar"><span>this is the content</span>
  <p>
    <div>dog</div>
    <div>5</div>
  </p>
</div>

Get HTML

You can get the rendered HTML without writing it in a file, using convert(filePath) instead of convertInFile(filePath,dist).

Ex:

var html = layout.convert('index.pug',locals);

Page Class

You can use page classes too:

var page = new pl.Page('index.pug');

And extend it programatically:

page.extends(layout);

Or extend it from a file path:

page.extendsFile('layout.pug');

Get the HTML:

var html = page.render({text: 'this is the content'});

Or render directly into a file:

page.renderInFile('index.html',{text: 'this is the content'});

render Page with Layout

Instead of using 'convert' and file path you can use a Page instance with Layouts:

var html = layout.render(page, {text: 'this is the content'});

Or render directly into a file:

layout.renderInFile(page, 'index.html', {text: 'this is the content'});