express-handlebars

首先,打开 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。

你可能感兴趣的:(express-handlebars)