❤
npm
Sign UpSign In

layout-wrapper

1.1.2 • Public • Published

layout-wrapper v1.1.2

Circle CI codecov Greenkeeper badge

Wrap the contents in the layout template. gulpfriendly.

This module is designed to be used with gulp or bulbo.

NOTE: See also layout1, which is a more simple and flexible version of this module.

Install

npm install layout-wrapper

Usage

This module works with gulp's file stream.

gulpfile.js:

const frontMatter = require('gulp-front-matter')
const wrapper = require('layout-wrapper')
 
gulp.src('src/pages/*.html')
  .pipe(frontMatter())
  .pipe(wrapper({
    layout: 'src/layouts',
    data: {name: 'world'},
    engine: 'nunjucks'
  }))
  .pipe(gulp.dest('site/'))

Note You still need to install the template engine. (In the above case, you need to install nunjucks)

src/pages/sample.html:

---
title: Hello
layout: default
---
<p>Hello, {{ name }}!</p>

src/layouts/default.nunjucks:

<html>
<head>
  <title>{{ file.frontMatter.title }}</title>
</head>
<body>
  {{ contents }}
</body>
</html>

The above settings outputs the following html into the path site/sample.html:

<html>
<head>
  <title>Hello</title>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Use with bulbo

bulbofile.js:

const frontMatter = require('gulp-front-matter')
const wrapper = require('layout-wrapper')
 
asset('src/pages/*.html')
  .pipe(frontMatter())
  .pipe(wrapper({
    layout: 'src/layouts',
    data: {name: 'world'},
    engine: 'nunjucks'
  }))

API

const wrapper = require('layout-wrapper')

wrapper(options)

  • @param {object} options - The options
  • @param {string} options.layout - The path to the directory of layout files. If nothing is given, then this throws an error. Required.
  • @param {string} [options.engine] - The name of the template engine. Default is lodash. Please see the document of consolidate.js for what's available here.
  • @param {object} [options.data] - The additional data which is passed to the layout engine.
  • @param {string} [options.frontMatterProp] - The name of the property where the front matter object is stored in vinyl. Default is frontMatter.
  • @param {string} [options.layoutProp] - The name of the property of layout pattern in a front matter. Default is 'layout'.
  • @param {string} [options.defaultLayout] - The default layout name when the layout property is not given in the front matter. Default is default.
  • @param {string} [options.extname] - The name of file extension name for template files. Default is '.' + engine name e.g. .lodash .ejs .nunjucks etc.
  • @return {Transform<Vinyl, Vinyl>}

This returns the transform stream from vinyl to vinyl. This transforms

Alias methods

You can also use alias methods.

gulp.src('src/pages/*.html')
  .pipe(frontMatter())
  .pipe(wrapper.nunjucks({
    layout: 'src/layouts',
    data: {name: 'world'}
  }))
  .pipe(gulp.dest('site/'))

The above is equivalent of engine: 'nunjucks' call of wrapper.

License

MIT

/layout-wrapper/

    Package Sidebar

    Install

    npm i layout-wrapper

    Repository

    github.com/kt3k/layout-wrapper

    Homepage

    github.com/kt3k/layout-wrapper#readme

    Weekly Downloads

    45

    Version

    1.1.2

    License

    MIT

    Last publish

    Collaborators

    • kt3k
    Try on RunKit
    Report malware