今回はプロフィールを作っていきます
今のままだと、Topページでしかナビゲーションバーが見れません
なので、そちらを先にテンプレート化します
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!--ここから--> <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 を作ってください
部分テンプレートを作成するにはファイル名の前にアンダーバーをつける必要があります
先ほど切り取ったコードをペーストします
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!--ここから--> <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 ファイルを呼び出してあげます
ちょうど真ん中あたりです
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!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などでもナビゲーションバーを見ることができるようになりました
それでは本題のプロフィールを作っていきたいと思います
|
1 |
$ rails g controller profile |
プロフィールでは１つのページを作るだけなので、モデルは必要ありません
なので、scaffoldはやめておきましょう
次にページを表示するための設定をしていきます
profile_controllerにindexを追加して
|
1 2 3 4 5 6 |
class ProfileController < ApplicationController def index end end |
app/views/profile/index.html.erbを作成しましょう
最後にルートの設定をすれば完成です
|
1 2 3 4 5 6 7 |
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 |
あとは、ナビゲーションバーにルートを設定します
ついでにブログのルートも入れておきます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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> |
これでどこからでもアクセスできるようになりました
