node + coffeescript + express + ejsでweb開発 その2
前回に引き続き、node.jsを使った開発について共有します。
Bootstrap, from twitterでレイアウト
前回のコードだけでは、味気がないので「Bootstrap」を使って、見た目を少しリッチに変更します。
そのために、以下のコードを修正します。
- index.coffee
- index.html
- layout.html
- style.css
ソースコードの修正
今回の修正の大きな特徴として、「layout.html」を作成することでwebページのレイアウト（テンプレート）を作成します。
そして、コンテンツに応じたレイアウトだけを他のhtmlファイルとして作成し、htmlの記述量を減らします。
変更内容は以下のようになります。
routes/index.coffee
exports.index = (req, res) ->
res.render "index",(
title: "Express"
)
views/index.html
<h1><%= title %></h1> <p>Welcome to <%= title %></p>
views/layout.html
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/> <link rel="stylesheet" href="/stylesheets/style.css"/> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#"><%= title %></a> <div class="nav-collapse"> <ul class="nav"> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> </ul> </div> </div> </div> </div> <div id="content" class="container"> <%- body %> </div> </body> </html>
public/stylesheets/style.css
#content{ padding-top: 50px; padding-left: 30px; }
coffeescriptを実行すると、以下の見た目の画面が表示されます。
