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