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

expressのejsで部分テンプレート(partial)を使う方法

新規事業のシステムで、node.jsを使うことになったので
(まぁ、技術全般はまかされてるので、勝手にnode.js使うかぁ、的なのりで使ってるんだけどね)
node.js + express
とかでぐぐっていろいろ調査してサイト作ってみている。

node.jsのFWではexpressがメジャーそうなのでとりあえずexpressを使ってみる事に。

expressではテンプレートエンジンがいろいろ種類あるらしいのだけど
Jadeがデフォルトでは(expressコマンドで何も指定しないとJadeになる)使われてしまうがよりHTMLの形に近いejsを使ってみる事に。

その際に、ejsのpartialを使う方法があまりWEBに情報が乗っていなかったのでメモしておく。

手順

ubuntu10.4上で試した。
node.js, express のインスコはこのあたりを参考にした。

$ mkdir sample
$ express -t ejs sample
   create : sample
   create : sample/app.js
   create : sample/pids
   create : sample/logs
   create : sample/public/javascripts
   create : sample/public/images
   create : sample/public/stylesheets
   create : sample/public/stylesheets/style.css
   create : sample/views/partials
   create : sample/views/layout.ejs
   create : sample/views/index.ejs
   create : sample/test
   create : sample/test/app.test.js
   - make sure you have installed ejs: $ npm install ejs
   
$ cd sample

$ vi app.js
-----
app.get('/', function(req, res){
  res.render('index', {
    locals: {
      title: 'Express',
      templ: res.partial('templ.ejs')  <-----ここ追加!!!!!!!
    }
  });
});
-----

$ vi views/partials/templ.ejs
-----
Include Template !!!!!!!
-----

$ vi views/index.ejs
-----
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<%= templ %>
-----

$ node app.js 
Express server listening on port 3000


http://localhost:3000/
にアクセスして

        • -

Express

Welcome to Express

Include Template !!!!!!!!!!!!

        • -

とか画面にでてきたら成功。

■追記

以下のような書き方ができた。こっちの方がシンプルです。

vi layout.ejs
-----
<!DOCTYPE html>
<html>
   :
   :
    <div id="header"><%- partial('header') %></div>
    <div id="body"><%- body %></div>
    <div id="footer"><%- partial('footer') %></div>
   :
   :
</html>
-----

vi header.ejs
-----
HEADER !!!!
-----

vi footer.ejs
-----
FOOTER  !!!!
-----

layout.ejsと、header.ejs, footer.ejs を同じディレクトリにおいておけばOK