yujiroのプログラミング

勉強内容をアウトプットし、サボらないようにする為のブログ

トップ > 機能追加 > <DAY127>パンくずgeneralについて

<DAY127>パンくずgeneralについて

機能追加

＼ Follow me!! ／

●6/27(木)
●学習日数 127日
●学習時間(本日)9.5時間
●累計学習時間 665時間
●一日あたりの平均学習時間 5.23時間

パンくずとは

WEBサイトの現在地を表示リスト。
SEO対策にもなるらしいが、今回はその件は割愛。
gneralを用いたパンくずの導入と利用方法について


gemの導入

gemを導入し、bundle

gem 'gretel'


rbファイル作成のため、コマンドを入力

rails generate gretel:install

以下ファイルが作成

app/config/breadcrumbs.rb

f:id:yujiro0320:20190628101717p:plain

ファイルの中身
デフォルトではコメントアウトとなっています。

このファイルに記述するのは、
ファイルの親子関係とパンくずにどのような表示をさせるか。

# homeの設定
crumb :root do
  link "メルカリ", root_path
end

# item#index
crumb :items do
  link "商品一覧ページ",items_path
  parent :root
end


# item#show
crumb :item do |item|
  link item.name,item_path
  parent :items
end


 # item#new
crumb :new do
  link "商品出品ページ", new_item_path
  parent :items
end

# user#show
crumb :user do
  link "マイページ",item_path
  parent :root
end

# user#show_notice
crumb :show_notice do
  link "お知らせ","/users/:id/show_notice"
  parent :user
end

# user#show_todo
crumb :show_notice do
  link "やる事リスト","/users/:id/show_todo"
  parent :user
end

# user#like_list
crumb :show_notice do
  link "いいね一覧","/users/:id/like_list"
  parent :user
end

breadcrumbs.rbファイルの書き方について

ホームに設定したい記述。

この場合メルカリがホームの名前で、
root_pathがホームのルートとなります。

# homeの設定
crumb :root do
  link "メルカリ", root_path
end

親の設定

親の設定は何を親にするのかを
parent以下に記入する。

# user#show
crumb :user do
  link "マイページ",item_path
  parent :root
end

ルートの書き方について

URLダイレクトでも指定ができる

# user#show_notice
crumb :show_notice do
  link "お知らせ","/users/:id/show_notice"
  parent :user
end

ぱんくずに表示させたいデータがある場合
変数を定義して使う。呼び出し側のviewにて変数を渡す必要がある。

# user#show_notice
crumb :show_notice do |i|
  link "#{i.name}"さん,"/users/:id/show_notice"
  parent :user
end

viewに関して

２点ポイントがある。

  • どこに表示させるか？
  • どのページを表示対象とするか？

1点目のポイント

どこに表示させるのか？
パンくずを表示させたい部分に記入する。
一箇所にしか記述ができない。
注意hamlで記載している

-# パンくずを表示させる部分        
  =breadcrumbs separator: " &rsaquo; "

erbだと
<%= breadcrumbs separator: " › "%>

2点目のポイント

@userにて情報を渡している。

-# パンくずの表示にて必要
-breadcrumb :show_notice, @user


erbだと
<% breadcrumb :show_notice, @user %>

何をしているか？

  • breadcrumbs.rbの記述に基づき、親子関係を表示する。
  • 記述した　:show_notice(キー)を指定する。
  • showアクションの場合、userのidが必要なため、@userインスタンスを
  • usersコントローラーで定義し取得している。

usersコントローラの記述

class UsersController < ApplicationController
  before_action :set_user,only:[:show]

   def show_notice
   end

 private

   def set_user
     @user = User.find(params[:id])
   end
end

idの引き渡しのないviewページではインスタンス変数を渡す必要がないので以下となる。
(例)

-breadcrumb :show_notice


＊他のアプリにてエラーになったため追加で記録
親でも表示に変数を渡している場合、parentにて親を指定した際に変数データーも渡す必要がある

#tweets/show
crumb :tweet_show do |tweet|
  link "#{tweet.title}の詳細",tweet_path(tweet.id)
end





 #answers/new
 crumb :answer_new do |tweet|
   link "問題を回答", new_tweet_answer_path 
   parent :tweet_show,tweet
 end

© 2019- yujiro