読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

Node Expressで、Handlebarsを使う

最初はちょっと手間取りましたが、なんとか使えるようになりました。

参考:donpark/hbs · GitHub

普通に使うだけ

種も仕掛けもなかった。

// 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);
}); 

としてあげれば、アプリ起動時にまとめてロードできて素敵。