您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页express-handlebars

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 页面布局模版。

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务