通过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.jade7 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