node

express-hbs简介

express-hbs 是一个handlebars模板引擎.

虽然express自带的jade也挺不错的, 但不支持html原生语法在很多场合下都会带来不方便 (尤其是copy代码时). 相对的, express-hbs在原生html的基础上用{ { } }来实现布局. 我更青睐这种的.

简介

说起来 handlebars 似乎是一个很有名气的引擎. 不过之前用前端js基本上只会用模板替换一些标签, 接触到nodejs时就已经有了express,自然一直用的都是jade. handlebars还是第一次用的说. 大体上看 express-hbs 和 jade 概念上比较类似. 都是先定义好一个layout(布局), 然后逐个定义layout中申明的block(块). 关于流程控制是常见的if, else 和 each. hbs.registerHelper可以申明比较高级的用户自定义模板函数.

安装和使用

安装

npm install express-hbs

配置

var hbs = require('express-hbs');
app.engine('hbs', hbs.express3({
  partialsDir: __dirname + ‘/views/partials’
}));
app.set(‘view engine’, ‘hbs’);
app.set(‘views’, __dirname + ‘/views’);

参数

  1. partialsDir: partials模板路径,如果有多个传递数组否则传递字符串
  2. blockHelperName: 重写 block 名称
  3. contentHelperName: 重写 contentFor
  4. defaultLayout: 默认layout模板的绝对路径
  5. extname: 模板扩展后缀(默认 .hbs)
  6. handlebars: 用其他 handlebars 引擎替代express-hbs的依赖
  7. layoutsDir: layout的模板路径
  8. templateOptions: template的参数

渲染

和jade差不多,

res.render(xxx.hbs, { data })

不太一样的是layout的选择需要在调用时指定data.layout

语法

变量替换

{ { argument } }    // 解析为字符串
{ { { argument } } } // 解析为 HTML

也就是说两个大括号的形式会把 < 等 html 字符转义成 < 之类的东西

block占位符

{ { { block “pageScripts” } } }

block申明

{ { #contentFor “pageScripts” } }
CONTENT HERE
{ { /contentFor } }

在模板中申明一个layout

{ { !< LAYOUT } }

PS: 注: layout如果以” . ” 开头,则表示相对当前模板路径, 否则表示 layoutsDir 参数的相对路径.

结构控制

循环

{ { #each data } }
<p>{ { this } }</p>  遍历并输出
{ { /each } }

条件

if…else的形式, 和each差不多

内建辅助方法

注册

hbs.registerHelper( ‘userFunction’, function(p1, p2) {
    return new hbs.SafeString(‘<a href=”‘+p1+’” target=”_blank”>’ + p2 + ‘</a>);
});

调用

{ { {  userFunction ‘https://github.com/ekoneko’ ‘ekoneko’ } } }

其他

多个 hbs并存

var hbs = require(‘express-hbs’);
var instance1 = hbs.create();
var instance2 = hbs.create();

不同的hbs单例拥有自己的命名空间和缓存. 或许构建大型项目会比较好用吧