安裝
$ npm install express
Handlebars模板引擎
安裝
$npm install --save express-handlebars
在express中引入
var handlebars=require('express-handlebars').create({defaultLayout:"main"});
app.engine('handlebars',handlebars.engine);
app.set('biew engine','handlebars');
默認是使用main模板
app.get('/foo',function(reqres){
res.render('foo');
})
//會使用views/layouts/main.handlebars作為布局
如果不想使用布局：
app.get('/foo',function(reqres){
res.render('foo',{layout:null});
})
如果想指定模板
app.get('/foo',function(reqres){
res.render('foo',{layout:'microsite'});
})
//會使用views/layouts/microsite.handlebars作為布局
注釋
不會被傳到瀏覽器：
{{! super-seret comment}}
會被傳到瀏覽器
<!--not-so-secret-comment-->
變量
{{name}}
{{{body}}}//關(guān)閉HTML轉(zhuǎn)義
局部文件
{{> weather}}
//會在views/partials中尋找weather.handlebars
引用子目錄中的
{{> tools/weather}}
//會在views/partials/tools中尋找weather.handlebars
段落
場景:視圖本身需要添加到布局的不同部分
var handlebars=require('express-handlebars').create({
defaultLayout:"main",
helpers:{
section:function(name,options){
if(!this._sections) this._sections={};
this._sections[name]=options.fn(this);
return null;
}
}
});
視圖中使用section輔助方法,創(chuàng)建視圖(views/jquerytest.handlebars),在<head>中添加一些東西，并添加一段使用jquery的腳本：
{{#section 'head'}}
<!-- let google to ignore this page -->
<meta name="robots" content="noindex">
{{/section}}
<h1>TEst Page</h1>
<p>test something</p>
{{#section 'jquery'}}
<script>
$('document').ready(function(){
$('h1').html('jquery works');
})
</script>
{{/section}}
現(xiàn)在在布局里可以相當之{{{body}}}一樣當值一個段落
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
{{{_section.head}}}
</head>
<body>
{{{body}}}
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
{{{_section.jquery}}}
</body>
</html>
