Railsのパンくずリストで2種類以上のトップページを実装する方法

こんばんは
アロハな男、やすのりです！

今日はポートフォリオで使用しているパンくずリスト用Gemgretelを導入時に少し躓いた、**『トップページを2種類以上実装する方法』**を説明していきたいと思います！

もし僕と同じことを実装したい方がいらっしゃったら参考にしてください！！

結論

2種類以上のトップページを実装する場合は、

config/breadcrumbs.rb

crumb :root do
  link "Home", root_path
end

という初期設定を

config/breadcrumbs.rb

crumb :top_page do
  link "トップページ", root_path
end

crumb :mypage_top do |user|
  link "マイページトップ", user_path(user.id)
end

という様な記述に修正し、rootという設定を無くす！！

なぜトップページが2種類以上必要？

まずそもそもなぜ通常だと1つでいいトップページが2種類以上必要なのかについてですが、これは私のポートフォリオの作り方で『その方が見栄えが良さそうだったから』です。

...ここに関しては理論立てた説明はありません

例えば、ポートフォリオでの検索結果ページや詳細ページに遷移した際はもちろんトップページからの遷移歴が表示されます。

しかし、マイページ内のユーザー情報編集ページに遷移した場合の遷移歴は、

この様に、トップページへのリンクはなく、マイページトップへのリンクしかありません。

これがもし遷移歴にトップページも表示させる様にすると、

となってしまい、少し表示が多く見づらくなってしまうなと思いました。
※トップページへのリンクはヘッダー部分に設置してあるため、マイページから出られなくなる等といったことはありません。

トップページを2種類用意するには？

gretelを使用する際に基本は遷移先のリンクと表示用文字列だけを記述し、親ページを設定したい時は別途設定を記述します。

config/breadcrumbs.rb

crumb :root do
  link "トップページ", root_path
end

crumb :mypage_top do |user|
  link 'マイページトップ', user_path(user.id)
end

crumb :mypage_edit do |user|
  link '会員情報の確認・変更', edit_user_registration_path
  #ユーザー情報編集ページがマイページトップの中に位置する様に設定している。
  parent :mypage_top, user
end

ただし、何も設定をしていない場合でもrootの設定と紐づいてしまいます。
そのためユーザー情報編集ページまでの遷移歴を表示する際に紐づいているトップページまで表示されてしまっているわけです。

『なら、rootとの紐付けを切り離すために、名前を変えちゃえばいいんだ！！』
ということで冒頭でお見せしたコードの出番ですが、

config/breadcrumbs.rb

crumb :top_page do
  link "トップページ", root_path
end

crumb :mypage_top do |user|
  link "マイページトップ", user_path(user.id)
end

crumb :mypage_edit do |user|
  link '会員情報の確認・変更', edit_user_registration_path
  #ユーザー情報編集ページがマイページトップの中に位置する様に設定している。
  parent :mypage_top, user
end

というコード構成になります。
このコード構成にして再度ユーザー情報編集ページを表示させることで、紐づいていないトップページの表示が消えてマイページトップからの遷移歴になるわけです。

注意点

この実装方法をした場合に、1つ注意しなければならないことがあります。

それは、**『検索結果ページに親ページを設定する必要がある』**ということです。

config/breadcrumbs.rb

crumb :root do
  link "トップページ", root_path
end

crumb :search_word do |search_word|
  link "'#{search_word}' の検索結果", search_path
end

元々は検索結果ページに何も設定しなくてもrootに紐づいていたので自動的にトップページを表示してくれていましたが、名前を変更(今回であればtop_page)に変更してしまっているので、紐付けが解除され親ページが存在しない状態になってしまっています。

なので、

config/breadcrumbs.rb

crumb :top_page do
  link "トップページ", root_path
end

crumb :search_word do |search_word|
  link "'#{search_word}' の検索結果", search_path
  #新たに設定したtop_pageというページを親ページとして設定する。
  parent :top_page
end

とコードを修正することで、元通りのパンくずリスト表示にすることができます。

最後に

トップページを2種類以上実装するということ自体そんなに頻繁にすることではないと思いますが、もし実装する際にこの記事が参考になれば幸いです！

この件に関するご指摘・アドバイスはどんどんいただきたいと思っていますので、コメントお待ちしています！！