心はいつもAirPucci (空元気でもいいから)

毎日がPucciを着ているような気分

RailsTutorial4.0を高速で復習する。またまた5.1.2章の途中から。

   


RailsTutorial4.0を高速で復習する。5.1.2章の途中から。です。cssはいったん終わり。次は
5.1.3パーシャル (partial)からです。

htmlを部品化する

レイアウトファイルを、ヘッダー、フッター、ボディの3要素に部品化します。部品化することにより、他で再利用しやすくなり、変更も簡単にできるようになるからですね。これをパーシャルといいます。

リスト5.9 ではなく、いっきに
リスト5.13 サイトのレイアウトにフッターパーシャルを追加する。をします。
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>

IE用のコードがなくなって、<%= render 'layouts/shim' %>と書いてあります。また、
ヘッダーナビゲーションがなくなって、<%= render 'layouts/header' %>と書いてあります。
<%= render 'layouts/footer' %>は追加です。

それぞれ、layouts/shim、layouts/header、layouts/footerが部品化されて、中身をrenderで読み込んでいるんですね。

layout/の下に部品をおきます。ファイル名は、layouts/_部品名.html.erb
読み込みは
<%= render 'layouts/部品名' %>
です。

リスト5.10 HTML shim用のパーシャル。
app/views/layouts/_shim.html.erb

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

リスト5.11 サイトヘッダー用のパーシャル。
app/views/layouts/_header.html.erb

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

リスト5.12 サイトフッター用のパーシャル。
app/views/layouts/_footer.html.erb

<footer class="footer">
  <small>
    <a href="http://railstutorial.jp/">Rails Tutorial</a>
    by Michael Hartl
  </small>
  <nav>
    <ul>
      <li><%= link_to "About",   '#' %></li>
      <li><%= link_to "Contact", '#' %></li>
      <li><a href="http://news.railstutorial.jp/">News</a></li>
    </ul>
  </nav>
</footer>

ちなみに、headerとかnavとか、html5で書かれてあるのもRailsTutorialのいいところですね。
スクリーンショット 2014-01-21 21.28.45

成形はできましたので、いったんコミットしておきます。
次は、
5.2SassとAsset Pipeline
からです。

 - テクニカル ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
RailsTutorial4.0を高速で復習する。3.5章。つづき。

3.5演習の2もんめをやります。 2.お気付きの方もいると思いますが、リスト3. …

40秒も待てない。

自由が丘のカフェでこれ書きました。Table Modern Service、食べ …

rails gでのファイル名、クラス名、アクション名

rails gすると、コントローラーとアクションができますが、 その書き方とファ …

no image
iTunesをMacBookAirからWindowsに戻しました。

2月にMacBookAirを購入し、今までWindows上にあったiTunesを …

パーフェクトRuby 2章Rubyの基礎 2-2 変数と定数

p47 2-2-1 ローカル変数 スコープは ・ブロック内 ・メソッド定義内 ・ …

no image
サイドバーの幅を決めたい(Googleアドセンス編)

サーバー移転したままブログが放置状態になっています。 その間も検索エンジン経由で …

no image
あんたのrakeは新しいけど古いのが必要なんだよっ!!と怒られた

Mavericksってrubyが2.0になったんですね。 てのはおいといて、 r …

no image
RailsTutorial4.0を高速で復習する。5.4.2章の途中から。

リスト5.35 ボタンをユーザー登録ページにリンクする、です。 リンクを貼る系は …

no image
RailsTutorial4.0を高速で復習する。9.3.2章。

9.3.2サンプルのユーザー、です。 Faker gemで、実際にありそうなユー …

no image
RailsTutorial4.0を高速で復習する。11.2.3章。

11.2.3「フォローしているユーザー」ページと「フォロワー」ページ、です。 仕 …