Ruby on Rails Tutorial　静的ページ作成、ナビゲーションメニューのリンク設定

wp-admin

3年前

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回は、home、about、help、contactの静的ページを作成し、ナビゲーションメニューにリンクを設定します。

（１）レイアウトファイル
　
サイトのコンテンツとフッター部分をBootstrap3のcontainerクラスでラップして、CSSスタイルを設定
　
$ vi app/views/layouts/application.html.erb

<body>
<%= render 'layouts/header' %>
<div class="container">
  <div ng-view></div>
  <%= render 'layouts/footer' %>
</div>

</body>

　
（２）静的ページを作成
　
１）homeページ
　
・サイトのホームページヘッダー部をBootstrapのJumbotronを使用します。
・rails.pngの画像は下記から入手し、app/assets/images/ディレクトリに配置しました。
http://rubyonrails.org/images/rails.png
　
$ vi app/assets/templates/static_pages/home.html.erb
　

<div class="jumbotron">
  <h1>Welcome to the Sample App</h1>
  <p class="text-center">
    This is the home page for the
    <a href="http://railstutorial.jp/">Ruby on Rails Tutorial</a>
    sample application.
  </p>
</div>
<a href="http://rubyonrails.org/"><img alt="Rails" src="/assets/rails.png" /></a>

　
２）helpページ
　

<h1 class="text-center">Help</h1>
<p>
  Get help on the Ruby on Rails Tutorial at the
  <a href="http://railstutorial.jp/help">Rails Tutorial help page</a>.
  To get help on this sample app, see the
  <a href="http://railstutorial.jp/book">Rails Tutorial book</a>.
</p>

　
３）aboutページ
　

<h1 class="text-center">About Us</h1>
<p>
  The <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
  is a project to make a book and screencasts to teach web development
  with <a href="http://rubyonrails.org/">Ruby on Rails</a>. This
  is the sample application for the tutorial.
</p>

　
４）contactページ
　

<h1 class="text-center">Contact</h1>
<p>
  Contact Ruby on Rails Tutorial about the sample app at the
  <a href="http://railstutorial.jp/contact">contact page</a>.
</p>

　
（３）ナビゲーションメニューにリンクを設定
　
１）ヘッダー
　
$ vi app/views/layouts/_header.html.erb
　
①サイトへのリンク
　
<%= link_to “Sample App”, “/static_pages/home”, class: “navbar-brand” %>
　
②homeページとhelpページのリンク
　

<ul class="nav navbar-nav navbar-right">

  <li><%= link_to "Home", "/static_pages/home" %></li>
  <li><%= link_to "Help", "/static_pages/help" %></li>
</ul>

　
２）フッター
　
$ vi app/views/layouts/_footer.html.erb

<ul class="nav nav-pills pull-right">
  <li><%= link_to "About", "/static_pages/about" %></li>
  <li><%= link_to "Contact", "/static_pages/contact" %></li>
  <li><a href="http://news.railstutorial.org/">News</a></li>
</ul>