Ruby on Rails パンくず機能 かなりわかりやすく説明
どうもかずきです！
今回はRuby on Rails パンくず機能 かなりわかりやすく説明というテーマで行ってみましょう！
パンくずとは？？？？？
サイトを訪れたユーザが今どこにいるかを視覚的にわかりやすくした誘導表示
↑写真は私がTECH::EXPERTの最終課題であるメルカリのコピーサイトで実装したものです
〜実装方法〜
①Gemfileに gem “gretel” を記入後、bundle install でインストール
Gemfile
gem "gretel"
ターミナル
$ bundle install
②$ rails g gretel:install コマンドによって自動的にconfig/breadcrumbs.rbが作成される
ターミナル
$ rails g gretel:install
③config/breadcrumbs.rbのファイル内を見る
config/breadcrumbs.rb
crumb :root do link "Home", root_path end # crumb :projects do # link "Projects", projects_path # end # crumb :project do |project| # link project.name, project_path(project) # parent :projects # end 以下略。。。
のような記述がデフォルトで書いてあることを確認
基本形の記述の意味は以下↓
config/breadcrumbs.rb
crumb :ページ名（任意で決められる） do link “実際に表示されるときの記述”, パス名 parent :ひとつ前のページ名(先頭ページであればこの行は書かない） end
※基本的にrootページ（最初に開くページ）から記載していく
④パンくずのレイアウトファイルを作って部分テンプレにする
シンプルなものであれば以下のようなクラス構造がオススメ （クラス名はお好み）
（例）hamlファイルでFont Awsomeのアイコンなどを入れたい場合
separatorとは区切っている境目のこと
_hogehoge.html.haml
.hoge ul.hogehoge li.hogehogehoge = breadcrumbs separator: “#{fa_icon ‘hoge-hoge’}”, class:”fuga”
画像やその他文字列も可能
その後、cssで肉付け
該当するページに部分テンプレする時は
部分テンプレ先のビューファイル.html.haml
- breadcrumb :該当するページ名 = render “hogehoge（ディレクトリが違う時はフォルダ名/パンくずファイル名とする”）
⑤ちょっと応用
変数名で表示させたい時
（例）特定のユーザーニックネームでのページ表示など
特定のユーザ名を引数として持ってくる
config/breadcrumbs.rb
crumb :user do |user| link "@#{user.nickname}", user_path(user) parent :users end
部分テンプレ先のビューファイル.html.haml
- breadcrumb :user,@user = render “hogehoge（ディレクトリが違う時はフォルダ名/パンくずファイル名とする”）
これだけわかれば問題なさそう
最後にお得な情報です
プログラミングスクールに通いたいと思っている方へ！
〜TECH::EXPERTお得な情報 受講料最大２万円OFF！！〜
- 紹介者欄に『奥田和記』と記入→受講料１万円OFF
- 上記に加えて無料カウンセリング参加→さらに受講料１万円OFF
この他に割引特典などももらえることがあります！
それでは！
