kikki's tech note

技術ブログです。UnityやSpine、MS製品など技術色々について解説しています。

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を実行すると、以下の見た目の画面が表示されます。

f:id:kikkisnrdec:20120404000029j:plain

※無断転載禁止 Copyright (C) 2015 kikkisnrdec All Rights Reserved.