トップのページだけそのページ用の js とか css とか読ませたいときにどうすればいいのか知りたかったけど、Sails の View のドキュメント http://sailsjs.org/#!documentation/views だと Partial の説明くらいしかなかった。
なので、ちょろっと調べてみたりしたことをまとめる。
Sails はデフォルトのテンプレートは ejs http://embeddedjs.com/ 。で、 ejs は簡単なテンプレート機能 https://code.google.com/p/embeddedjavascript/wiki/Templates しか有していないので、 Sails では ejs-local https://github.com/RandomEtc/ejs-locals というモジュールを追加して、 layout
, partial
, block
という機能を追加している。
例
layout.ejs
<!DOCTYPE html> <html> <head> <title><%- title %></title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <%- scripts %> <%- stylesheets %> <%- blocks.specific_scripts %> </head> <body> <%- body %> <script type="text/javascript" src="/js/socket.io.js"></script> <script type="text/javascript" src="/js/sails.io.js"></script> <script type="text/javascript" src="/js/app.js"></script> </body> </html>
foo/index.ejs
<% script('foo.js') -%> <% stylesheet('foo.css') -%> <% block('specific_scripts', '<script type="text/javascript">alert(123);</script>') -%> <div id="content"> <h2>It works!</h2> </div>
で、レンダリングさせると、こんなHTMLが出力されまする。
<!DOCTYPE html> <html> <head> <title>my first Sails</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <script src="foo.js"></script> <link rel="stylesheet" href="foo.css" /> <script type="text/javascript">alert(123);</script> </head> <body> <div id="content"> <h2>It works!</h2> </div> <script type="text/javascript" src="/js/socket.io.js"></script> <script type="text/javascript" src="/js/sails.io.js"></script> <script type="text/javascript" src="/js/app.js"></script> </body> </html>