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

Sails のレイアウトに任意のブロックを追加する話

トップのページだけそのページ用の 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>