ExpressJSでのHTML分割管理(ejs)

JavaScript

HTMLを出力する時、全体のレイアウト部分とコンテンツ部分を分けて管理する事は良くあります。ヘッダ・フッタは固定でレイアウトファイルとして保存しておき、管理をしやすくさせておくのにExpressJSではexpress-partialsが使えるようです。

＃いくつか検索してみると、ExpressJSだけでできるような記述があったのですが、2系の時は標準で実装されていたみたいですね
さっそくプロジェクトの作成から。

$ express -e partials
$ cd partials && npm install
$ npm install express-partials --save

app.js

var express = require('express')
  , partials = require('express-partials')
  , routes = require('./routes')
  , http = require('http')
  , path = require('path');
....
app.configure(function(){
...
  app.set('view engine', 'ejs');
  app.use(partials());
...
});

この状態でnode app.jsをしてアクセスすると、以下の様なエラーが表示されます。

500 Error: Failed to lookup view "./layout.ejs"

layout.ejsを読込もうとして失敗している事が分かります。

layout.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <%- body %>
  </body>
</html>

index.ejs

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

これでアクセスすると組合わさった状態で出力されます。

ちなみに、<%- body %>を<%= body %>とすると、index.ejsのタグが実体参照されて表示されます。

また、ドキュメントにある通り、layoutオプションにfalseを指定する事でレイアウトを使わないようにできたり、文字列を渡す事で特定のレイアウトファイルを使う事もできるようです。