第4章-模板引擎Jade和Handlebars-4.6.Express.js中Jade和Handlebars的用法

默认情况下,Express.js 4.x 和 3.x可以使用提供给res.render方法的模板扩展,也可以使用通过view engine设置的默认扩展,去调用模板库里的require方法和__express方法。换句话说,Express.js是在外部实例化模板引擎库的,该库需要有__express方法。

当模板引擎库不提供__express方法,也不提供有参数(path、options、callback)的类似方法时,建议你用Consolidate.js

一、这里有一个Express.js 4 中Consolidate.js快速入门的例子(Express 版本4.2.0、Consolidate版本0.10.0):

package.json文件

{
  "name": "consolidate-express",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "4.2.0",
    "swig": "1.3.2",
    "consolidate": "0.10.0"
  }
}

app.js文件

var express = require('express'),
  cons = require('consolidate'),
  app = express()

app.engine('html', cons.swig)


app.set('view engine', 'html')
app.set('views', __dirname + '/views')

var platforms = [
  { name: 'node' },
  { name: 'ruby' },
  { name: 'python' }
]

app.get('/', function(req, res){
  res.render('index', {
    title: 'Consolidate This'
  })
})

app.get('/platforms', function(req, res){
  res.render('platforms', {
    title: 'Platforms',
    platforms: platforms
  })
})

app.listen(3000)
console.log('Express server listening on port 3000')

index.html文件

<h1>{{ title }}</h1>
<a href="/platforms">platforms</a>

platforms.html文件
<h1>{{ title }}</h1>
<ul>
{% for platform in platforms %}
  <li{% if loop.first %} class="first"{% endif %}>
    {{ platform.name }}
  </li>
{% endfor %}
</ul>

======================华丽丽的分割线==========================================

二、Jade和Express.js

Jade是兼容Express.js的,事实上,Jade就是Express.js的默认模板引擎。所以要在Express.js中使用Jade,只需安装模板引擎模块jade,然后设置view engine即可。

app.set('view engine', 'jade');

注:如果使用命令行工具$express ,你可以给引擎增加一个选项,比如给EJS加选项-e,给Hogan加选项-H。这将会自动把EJS或Hogan添加到新项目中。如果没有任何选项,express-generator(版本4.0.0-4.2.0)将会使用Jade

在路由文件中,我们可以调用模板,如:views/page.jade(文件夹views的名字是Express.js的另一个默认值,可以用view setting重写):

app.get('/page', function(req, res, next){
    //动态获得数据
    res.render('page', data);
});

如果不指定views engine,那么扩展必须显式地传递给

res.render():
res.render('page.jade', data);

三、Handlebars和Express.js

与Jade相反,Handlebars库没有__express方法,但是可以通过一些选项让Handlebars在Express.js下工作:
1.consolidate:Express.js模板引擎库的一个神器,如之前描述的
2.hbs:Handlebars的开发库
3.express-Handlebars:这个模板是3.x的,同时在Express.js 4下也能良好的运行

在Express.js中使用hbs:

...
app.set('view engine', 'hbs');
...

如果想要换成另一个扩展,比如html,

...
app.set('view engine', 'html');
pp.engine('html', require('hbs').__express);
...

Express3-handlebars方法的用法如下:

...
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');
...
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值