❤
npm
Sign UpSign In

This package has been deprecated

Author message:

old package

low-layout

0.2.0 • Public • Published

express-low-layout

Low-layout is a layout system based on Mustache and Express.

Instalation

$ npm install express-low-layout

Usage

const layout = require('low-layout')
app.use(layout)

Exemple:

install express and express-low-layout

$ npm install --save express 
$ npm install --save express-low-layout

index.js

Create a simple express app with two route: /home and /test

var express = require('express')
var layout = require('express-low-layout')
var app = express()
 
//set the views directory
app.set('view', './views')
app.use(layout)
 
//home route
app.get('/home', function (req, res) {
  //load the layout from the file home.html
  req.layout.loadTemplate('home.html')
 
  //send the layout html
  req.layout.render().then((html) => {
    res.send(html)
  })
})
 
//test route
app.get('/test', function (req, res) {
  //load the layout from the file test.html
  req.layout.loadTemplate('test.html')
 
  //Set the title of the block head
  req.layout.getBlock('head').data.title = 'Test page'
 
  //send the layout html
  req.layout.render().then((html) => {
    res.send(html)
  })
})
 
app.get('*', function (req, res) {
  res.redirect('/home')
})
 
app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

/views/page/default.html

The template for the page For the template syntax read the mustache js documentation

<template>
    <!doctype html>
    <html lang="en">
    <!-- block head -->
    {{{blocks.head}}}
    <body>
 
    <header>
        <nav>
            <ul>
                <li>
                    <a href="/home">Home</a>
                </li>
                <li>
                    <a href="/test">Test</a>
                </li>
            </ul>
        </nav>
    </header>
    <main role="main">
        <!-- block content -->
        {{{blocks.content}}}
    </main>
 
    <footer>
        <p>footer</p>
    </footer>
    </body>
    </html>
</template>
<script>
  //Require the block dependency
  var Block = require('low-layout/block')
 
  //Block for the page
  class Default extends Block {
    init () {
      //set the name of the block
      //the name of the block can be define in this way or for other block it can be defined in the config
      this.name = 'page'
 
      //Add the head block
      this.addBlock({name: 'head', template: 'page/head.html'})
 
      //content block it just a block container
      //to use block with no html temple use type
      this.addBlock({name: 'content', type: 'container'})
    }
 
    beforeRender () {
      //Add a css in the head block
      this.layout.getBlock('head').addCss('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css')
    }
  }
 
  module.exports = Default
</script> 

/views/page/head.html

template for the head block define in the file views/page/default.html

<template>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
 
        <title>{{title}}</title>
        {{#css}}
        <link rel="stylesheet" href="{{{.}}}">
        {{/css}}
 
        {{#js}}
        <script src="{{{.}}}"></script> 
        {{/js}}
    </head>
</template>
<script>
  //requite the block object
  var Block = require('low-layout/block')
 
  //A Test class for the test page
  class Head extends Block {
 
    init () {
      this.data.css = []
      this.data.js = []
    }
 
    addCss (cssFiles) {
      if (Array.isArray(cssFiles)) {
        for (var key in cssFiles) {
          this.data.css.push(cssFiles[key])
        }
      } else if (typeof cssFiles === 'string') {
        this.data.css.push(cssFiles)
      } else {
        throw Error('Invalid addCss argument')
      }
    }
 
    addJs (jsFiles) {
      if (Array.isArray(jsFiles)) {
        for (var key in jsFiles) {
          this.data.js.push(jsFiles[key])
        }
      } else if (typeof jsFiles === 'string') {
        this.data.js.push(jsFiles)
      } else {
        throw Error('Invalid addJs argument')
      }
    }
  }
 
  module.exports = Head
</script> 

/views/home.html

The template for the /home route

<template>
    <div>
        <h1>Home page</h1>
    </div>
</template>
<script>
  //requite the block object
  var Block = require('low-layout/block')
 
  //A Block class for the home page
  class Home extends Block {
    init () {
      this.page ='page/default.html'
        //name of the parent block of this block
        //here the block content, it is defined in the file page/default.html
      this.parent = 'content'
 
    }
 
    beforeRender() {
      //set the name of the head block
      this.layout.getBlock('head').data.title = 'Home page'
    }
  }
 
  module.exports = Home
</script> 

/views/test.html

The template for the /test route

<template>
    <div class="test">
        <h1>Test</h1>
    </div>
</template>
<script>
  //requite the block object
  var Block = require('low-layout/block')
 
  //A Test class for the test page
  class Test extends Block {
    init () {
      this.page ='page/default.html'
      //name of the parent block of this block
      //here the block content, it is defined in the file page/default.html
      this.parent= 'content'
    }
  }
 
  module.exports = Test
</script> 

Run:

$ node index.js

Readme

Keywords

none

Package Sidebar

Install

npm i low-layout

Repository

github.com/EdwardL0w/low-layout

Homepage

github.com/EdwardL0w/low-layout#readme

Weekly Downloads

2

Version

0.2.0

License

MIT

Unpacked Size

1.6 MB

Total Files

301

Last publish

Collaborators

  • edwardlow
Try on RunKit
Report malware