2013-05-01 17:34

部分テンプレートを作成する

部分テンプレートの作成

レイアウトからレンダリングされる部分テンプレートを作成しましょう。
レイアウトに関してはこちら ⇒ アプリケーション共通のレイアウトを作成する

ここではヘッダとフッタを作成します。

部分テンプレートの作成場所

まずファイルの作成場所ですが、ヘッダやフッタなどの部分テンプレートはアプリケーションにおいて共通のテンプレートなので、app/views配下にsharedというディレクトリを作成してその中に納めましょう。

ターミナル
$ cd app/views
$ mkdir shared
$ cd shared
$ touch _header.html.erb
$ touch _footer.html.erb

アプリケーションのルートディレクトリにいると想定して、cdでviewsディレクトリに移動し、mkdirでsharedディレクトリを生成、移動、touchでファイルを作成しています。

部分テンプレートの実装

さて、早速作成した部分テンプレートの中身を記述していきましょう。

まず、ヘッダから。
先程作成したapp/views/shared/_header.html.erbに実装していきます。

まずマジックコメントを書いて。

app/views/shared/_header.html.erb
<%# -*- coding: utf-8 -*- %>

で、とりあえず次のリンクメニューを作成してみましょう。

  • トップ
  • 記事一覧
  • 新規記事作成

マジックコメントに続けて書きましょう。

app/views/shared/_header.html.erb
<div class="menubar">
<%= link_to "トップ", :root %>
<%= link_to "記事一覧", :articles %>
<%= link_to "新規記事作成", :new_article %>
</div>

divでmenubarの領域を指定し、その中にリンクを作成しています。
link_toメソッドは、引数にリンクテキスト、リンク先のパスを指定することでリンクを作成することができる。
パスはroutes.rbに従って指定すること。

これでヘッダはおっけ。

次はフッダ。
これはシンプルに。

  • このサイトについて

とりあえずこれだけでいいかな。

実装は先程ターミナルから作成したapp/views/shared/_footer.html.erbですね。

app/views/shared/_footer.html.erb
<%# -*- coding: utf-8 -*- %>

<%= link_to "このサイトについて", :about %> | Piyopiyo

おしまい。

さて、最後にコントローラのアクションに紐付いたコンテンツViewを作成しましょう。
続きは次回 ⇒ コンテンツViewを作成する