【33日目】【1日20分のRailsチュートリアル】【第5章】レイアウトでパーシャルを利用する
今日は「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
今回追加したフッターがレイアウト微妙なのでいじる。
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; }
いい感じの見た目になりました。
ソースをすっきり書けるのはいいですね。
ファイルは増えるけど分けた方が分かりやすいんじゃないかなー。
今日の作業時間は【26分】。
次は「5.2 SassとAsset Pipeline」から。