Nodejs + Express + EJS搭建带有母版的网站

通过nodejs express ejs ejs-mate 搭建具有母版页面的网站页面，省略nodejs的安装过程。

Express

安装Express

$ npm install express --save

Express 应用生成器搭建网站

$ npm install express-generator -g
$ express myapp
$ cd myapp 
$ npm install
$ DEBUG=myapp npm start

后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。注意这时默认的模版引擎是jade。需要做相应的修改才能支持ejs
通过 Express 应用生成器创建的应用一般都有如下目录结构：

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│   └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade

7 directories, 9 files

EJS & ejs-mate

安装

$ npm install ejs
$ npm install ejs-mate --save

修改文件app.js，使用母版引擎ejs

var engine = require('ejs-mate');
app.engine('ejs', engine);
app.set('view engine', 'ejs');

添加模版文件layout.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>It's <%= who %></title>
  </head>
  <body>
    <section>
      <%- body -%>
    </section>
  </body>
</html>

index.ejs使用母版文件

<% layout('layout') -%>
<h1>I am the <%= what %> template</h1>

Express4.0 渲染

var express = require('express'),
  engine = require('ejs-mate'),
  app = express();

// use ejs-locals for all ejs templates:
app.engine('ejs', engine);

app.set('views',__dirname + '/views');
app.set('view engine', 'ejs'); // so you can render('index')

// render 'index' into 'boilerplate':
app.get('/',function(req,res,next){
  res.render('index', { what: 'best', who: 'me' });
});

app.listen(3000);

渲染后将会得到代码

<!DOCTYPE html>
<html>
  <head>
    <title>It's me</title>
  </head>
  <body>
    <section>
      <h1>I am the best template</h1>
    </section>
  </body>
</html>

参考链接
www.expressjs.com.cn/
http://www.embeddedjs.com/
https://github.com/JacksonTian/ejs-mate