最初はちょっと手間取りましたが、なんとか使えるようになりました。
普通に使うだけ
種も仕掛けもなかった。
// app.js var express = require('express'), app = module.exports = express(); // ... var hbs = require('hbs'); // ... app.set('view engine', 'html'); app.engine('html', hbs.__express);
とりあえずコレだけで、もうあの {{hoge}} が使えます。
拡張子をhtmlにしてることに特に意味はないので、hbsでもなんでも変更。
テンプレートをインクルードしたい
別ファイルをそのまま読み込みたいという話です。
ejsでいうところの、
<% include header.ejs %>
みたいなやつ。
それ、Handlebarsでもできるよ!
// app.jsのつづき var hbs = require('hbs'); var fs = require('fs'); // ... hbs.registerPartial('header', fs.readFileSync(__dirname + '/views/header.html', 'utf8'));
とかするだけで、
<!-- header.html -->
こちらheader、こちらheader!
を、
<!-- index.html --> {{> header}} <hr> メインのコンテンツやで
ってできる。
一気にregisterPartialする
どこからコピーしてきたか忘れてしまったのですが・・。
fs.readdirSync(__dirname + '/views/partials').forEach(function(fileName) { var matches = /^([^.]+).hbs$/.exec(fileName); if (!matches) { return; } var name = matches[1], template = fs.readFileSync(__dirname + '/views/partials/' + fileName, 'utf8'); hbs.registerPartial(name, template); });
としてあげれば、アプリ起動時にまとめてロードできて素敵。