ぞえの技術めも

Ruby on Rails勉強中

【33日目】【1日20分のRailsチュートリアル】【第5章】レイアウトでパーシャルを利用する

Ruby on Railsチュートリアル(第3版)

今日は「5.1.3 パーシャル (partial)」から。

5.1.3 パーシャル (partial)

パーシャル (partial) を追加すればレイアウトを見やすくできるそう。
機能単位でパーシャルにまとめる感じかな…?

まずshimパーシャルを作成。

$ touch app/views/layouts/_shim.html.erb

app/views/layouts/_shim.html.erb

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->

次はヘッダー用のパーシャル。

$ touch app/views/layouts/_header.html.erb

app/views/layouts/_header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "sample app", '#', id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",   '#' %></li>
        <li><%= link_to "Help",   '#' %></li>
        <li><%= link_to "Log in", '#' %></li>
      </ul>
    </nav>
  </div>
</header>

最後にフッター用のパーシャル。

$ touch app/views/layouts/_footer.html.erb

app/views/layouts/_footer.html.erb

<footer class="footer">
  <small>
    The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
  </small>
  <nav>
    <ul>
      <li><%= link_to "About",   '#' %></li>
      <li><%= link_to "Contact", '#' %></li>
      <li><a href="http://news.railstutorial.org/">News</a></li>
    </ul>
  </nav>
</footer>

各パーシャルが作成できたらレイアウトファイルを修正。
render使ってパーシャルを読み込むように置換。(フッターは追加)

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag 'application', media: 'all',
                                           'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
      <%= render 'layouts/footer' %>
    </div>
  </body>
</html>

サーバー起動して見た目を確認。

$ rails server -b $IP -p $PORT

f:id:kt_zoe:20160905123214p:plain

今回追加したフッターがレイアウト微妙なのでいじる。

app/assets/stylesheets/custom.css.scss

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

footer a {
  color: #555;
}

footer a:hover {
  color: #222;
}

footer small {
  float: left;
}

footer ul {
  float: right;
  list-style: none;
}

footer ul li {
  float: left;
  margin-left: 15px;
}

f:id:kt_zoe:20160905123240p:plain

いい感じの見た目になりました。

ソースをすっきり書けるのはいいですね。
ファイルは増えるけど分けた方が分かりやすいんじゃないかなー。

今日の作業時間は【26分】

次は「5.2 SassとAsset Pipeline」から。