Partials
在 application.html.erb 中，有些結構，像是 <!--[if lt IE 9]> （HTML shim）或是 <header> ，都可以另外取出來當成 partial ，這樣可以讓檔案看起來更精簡：
<!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 %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<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>
<div class="container">
<%= yield %>
</div>
</body>
</html>
調整之後：
<!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 %>
</div>
</body>
</html>
在這一行中，調用了 Rails 的輔助方法 render：
<%= render 'layouts/shim' %>
上面那行程式碼會去尋找 app/views/layouts/_shim.html.erb 的檔案，然後把檔案內容置入到 view 裡面。
partial 的命名規則是前面加一條底線 _。
以下建立 HTML shim 和 header 的 partial：
app/views/layouts/_shim.html.erb
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
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>
接著也幫 footer 建立一個 partial：
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>
然後回到 app/views/layouts/application.html.erb 加上 footer 的 partial：
<!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>
在幫 footer 寫 CSS：
.
.
.
/* footer */
footer
margin-top: 45px
padding-top: 5px
border-top: 1px solid #eaeaea
color: #777
a
color: #555
&:hover
color: #222
small
float: left
ul
float: right
list-style: none
li
float: left
margin-left: 15px
然後順便調整一下 Rails logo 的樣式，先在 app/views/static_pages/home.html.erb 加上 Rails logo 的 CSS ID：
<%= link_to image_tag("rails-logo.svg", alt: "Rails logo", id: "rails-logo"),
"http://rubyonrails.org/" %>
然後 CSS：
.
.
.
/* rails logo */
#rails-logo
max-width: 200px
最後效果如下：
