Node.js Express.js 学习笔记(3)
在Express.js 2.x的版本中一直存在着一个叫layout.ejs的页面布局模板，他的基本代码如下：
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <%- body %> </body> </html>
在Express.js 2.x中，单独的小模板都会默认继承这个布局模板，替换掉<%- body %>。
当然，对layout.ejs的使用并不是强制的，可以在app.js的app.configure里把这个页面布局关掉：
app.configure(function(){
app.set('view options',{
layout: false
});
});
再当然，一个项目中用到多套布局模板也是很常见的，我们可以为不同的link指定不同的布局模板：
app.get('/admin', function(req, res) {
res.render('admin', {
title: '管理员布局模板',
layout: 'admin'
})
});
这是一个非常有用的功能，可以让我们方便的管理头尾加载的js,css和GA代码之类的全局性的代码。但是从Express.js 3.0 开始，就把layout概念移除了。转而以中间件的形式实现相同的功能。所以你可以忘记上面的三段代码。
express-partials
Express 3.x Layout & Partial support.
The beloved feature from Express 2.x is back as a middleware!
————–插一句—————–
请先安装 node-dev, 它可以在我们修改代码后，自动帮我们重启app.js。把它装到全局下面去：
$ sudo npm install -g node-dev
自从用的node-dev，妈妈再也不用帮我重启app.js了
$ node-dev app.js
————–插好了—————-
重头新建一个express 3.0的项目做测试, 同时装好express-partials
$ express --sessions --css stylus --ejs myapp $ cd myapp $ sudo npm install $ sudo npm install express-partials
在app.js里加入：
var partials = require('express-partials')；
app.use(partials());
app.get('/', function(req, res, next) {
res.render('index.ejs', {
title: 'Hello Layout'
})
});
ps: app.use(partials()); 必须放在 app.use(app.router); 的上面
目前 ./views 目录下只有一个index.ejs的模板：
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> </body> </html>
现在访问 http://127.0.0.1:3000/ 的结果就是：
把Express.js 2.x的layout.ejs恢复到 ./views 目录，代码如下：
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <%- body %> </body> </html>
改写 index.ejs:
<h1><%= title %></h1> <p>Welcome to <%= title %></p>
再访问 http://127.0.0.1:3000/
当然，不用layout布局也是可以的：
app.get('/no-layout', function(req, res, next) {
res.render('index.ejs', {
layout: false,
title: 'no layout'
})
});
指定布局模板当然也是可以的：
app.get('/mobile', function(req, res, next) {
res.render('index.ejs', {
layout: 'mobile',
title: 'mobile tpl'
})
});
mobile.ejs :
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <%- body %> <div>我是mobile模板</div> </body> </html>
———–屌丝和毅丝的分割线————-
上面app.js里那些高耦合的代码实在太屌丝，改之：
app.get('/', routes.index);
app.get('/no-layout', routes.no_layout);
app.get('/mobile', routes.mobile);
在./routes/index.js 里添加：
exports.index = function(req, res) {
res.render('index', {
title: 'Hello Layout'
});
};
exports.no_layout = function(req, res) {
res.render('index.ejs', {
layout: false,
title: 'no layout'
});
};
exports.mobile = function(req, res) {
res.render('index.ejs', {
layout: 'mobile',
title: 'mobile tpl'
});
};
这样，至少看上去毅丝了
ps: routes.no_layout 不能写成 routes.no-layout， 否则会报错
Quality articles is the crucial to interest the viewers to go to see the web page, that’s what this site is providing.