用express-hbs写layout

之前的项目也有接触过layout，只不过那个时候用的是jade。

jade里使用include、block来改变页面内容，extends继承。 所以这次说要用express-hbs写layout的时候，就理所当然的模仿了jade的语法。结果可想而知，踩了各种的坑。

(以下为伪代码)

//layout.hbs
< head > ...< /head > {{body}}

//index.hbs
{{!< layout}} .....

//login.hbs
.....

因为我只用了一层继承，虽然语法不规范，也没有报错。但是有个很奇怪的现象，不管是index,还是login,都继承了layout,可是明明只有一个用到了继承。这就是我一开始踩到的坑。

express里的layout，它会默认的去寻找继承layout.hbs，所以即使我的页面并没有写{{!< layout}},它都会有效果。 这个时候，你可以在express-hbs的github上看到，要继承express-hbs的layout并不只有一种方法。还可以在发送请求渲染页面的时候，让layout作为参数传过去。

res.render('/',{ layout:null });

这样，就不会有任何layout的效果了。

这才只是第一个坑而已。因为语法的严重不规范，以至于到后来的多重继承一直报错。 于是我决定认真学习express-hbs的语法。

layout应该布局的页面：

 {{{body}}}

申明block的占位符：

{{{block "name"}}}

在页面内定义block的内容：

{{#contentFor "name"}}
content
{{/contentFor}}

就在我以为解决了所有问题的时候，问题又来了，还一直在报错。

Missing helper:contentFor;

查了好多文档。后来去读源码，源码里有自动默认的contentHelperName,而且就是contentFor。

并不能理解这么helper怎么就missing了，后来才发现，在app里漏掉了很重要的一段。

app.engine('hbs', hbs.express4({ partialsDir: \__dirname + '/views/partials' }));

这是用于设置engine的，只有因为这次的app是由generte自动生成的，并没有仔细去看。

如果没有这段话，服务器总是会自动去寻找hbs文件夹下的东西，而这是express-hbs下的语法，，就算你吧express-hbs require进来也没有用，所以才会一直报错。但是加上这段代码就可以了。