Railsで簡単にブログを作る3(初心者向け)

今回はプロフィールを作っていきます

今のままだと、Topページでしかナビゲーションバーが見れません
なので、そちらを先にテンプレート化します

<!--ここから-->
<nav class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
      <span class="sr-only">メニュー</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <div id="gnavi" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="">Profile</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Contacts</a></li>
    </ul>
  </div>
</nav>
<!--ここまでを切り取ります！！-->


<div class="container-fluid">
  <div class="container">
    <h1>Blog</h1>
    <div class="row">
      <% @posts.each do |post| %>
          <div class="col-md-4">
            <%= image_tag(post.post_images[0].image.thumb, {:style => 'width:100%; height:45;'}) %>
            <h2><%= post.title %></h2>
            <p><%= post.brief %></p>
            <p><%= link_to 'Show', post %></p>

          </div>
      <% end %>
    </div>
  </div>
</div>

そして、app/views/shared/_header.html.erb を作ってください
部分テンプレートを作成するにはファイル名の前にアンダーバーをつける必要があります
先ほど切り取ったコードをペーストします

<!--ここから-->
<nav class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
      <span class="sr-only">メニュー</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <div id="gnavi" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="">Profile</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Contacts</a></li>
    </ul>
  </div>
</nav>
<!--ここまでを切り取ります！！-->


<div class="container-fluid">
  <div class="container">
    <h1>Blog</h1>
    <div class="row">
      <% @posts.each do |post| %>
          <div class="col-md-4">
            <%= image_tag(post.post_images[0].image.thumb, {:style => 'width:100%; height:45;'}) %>
            <h2><%= post.title %></h2>
            <p><%= post.brief %></p>
            <p><%= link_to 'Show', post %></p>

          </div>
      <% end %>
    </div>
  </div>
</div>

ペーストして_header.html.erb を作り終えたら、_header.html.erb ファイルを呼び出してあげます
ちょうど真ん中あたりです

<!DOCTYPE html>
<html>
<head>
  <title>MyBlog</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<%= render 'shared/header' %>

<%= yield %>

</body>
</html>

部分テンプレート化したので、indexだけではなく、showなどでもナビゲーションバーを見ることができるようになりました

それでは本題のプロフィールを作っていきたいと思います

$ rails g controller profile

プロフィールでは１つのページを作るだけなので、モデルは必要ありません
なので、scaffoldはやめておきましょう
次にページを表示するための設定をしていきます

profile_controllerにindexを追加して

class ProfileController < ApplicationController
  
  def index
  end
  
end

app/views/profile/index.html.erbを作成しましょう

最後にルートの設定をすれば完成です

Rails.application.routes.draw do
  root 'posts#index'
  get 'profile' => 'profile#index' 
  resources :posts
  devise_for :admin_users, ActiveAdmin::Devise.config
  ActiveAdmin.routes(self)
end

あとは、ナビゲーションバーにルートを設定します
ついでにブログのルートも入れておきます

<nav class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
      <span class="sr-only">メニュー</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <div id="gnavi" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">

      <!--ここ↓!!!-->
      <li><a href="/profile">Profile</a></li>
      <li><a href="/posts">Blog</a></li>
      <li><a href="">Contacts</a></li>
    </ul>
  </div>
</nav>

これでどこからでもアクセスできるようになりました

Railsで簡単にブログを作る3(初心者向け)

コメントをどうぞ

コメントをキャンセル