首先,打开 package.json,添加对 express-handlebars 的依赖:
"express-handlebars": "*"
并 npm install 安装 express-handlebars 包。
打开 index.js ,添加一行:
var exphbs = require('express-handlebars');
app.engine('hbs', exphbs({
layoutsDir: 'views',
defaultLayout: 'layout',
extname: '.hbs'
}));
app.set('view engine', 'hbs');
这里我们注册模板引擎处理后缀名为 hbs 的文件,然后通过 app.set('view engine', 'hbs'); 设置模板引擎。以上参数的意思是:
layoutsDir: 'views': 设置布局模版文件的目录为 views 文件夹
defaultLayout: 'layout': 设置默认的页面布局模版为 layout.hbs 文件,跟 Express 2.x 中的 layout.ejs 作用类似。
extname: '.hbs': 模版文件使用的后缀名,这个 .hbs 是我们自定的,我们当然可以使用 .html 和 .handlebars 等作为后缀,只需把以上的 hbs 全部替换即可。
这里我们定义了一个默认的页面布局模版(layout.hbs)。其余所有的模版都将 "继承" 该模版,即替换掉 {{{body}}} 部分。
当我们渲染 index.hbs (res.render('index', { ... });)时,index.hbs 会替换 layout.hbs 中的 {{{body}}} 部分,然后渲染视图。
最后,还需提醒的一点是:我们每次渲染一个视图文件时,都会结合 layout.hbs 然后渲染,有时候我们并不需要 layout.hbs ,比如 404 页面,需设置为:
res.render('404', {
layout: false
});
通过设置 layout: false 就取消了自动加载 layout.hbs 页面布局模版。
使用 partial ,前面的修改中我们并没有添加分页模版(paging.hbs),要想引入分页模版使用 {{> paging}} 即可详细使用见https://github.com/ericf/express-handlebars。