[RUBY] How to implement more than one top page in Rails breadcrumb trail

Good evening Aloha man, Yasunori!

Today, I would like to explain ** "How to implement two or more types of top pages" **, which I stumbled upon when introducing the breadcrumb trail Gemgretel used in my portfolio!

If anyone wants to implement the same thing as me, please refer to it! !!

Conclusion

When implementing two or more types of top pages,

config/breadcrumbs.rb

crumb :root do
  link "Home", root_path
end

Initial setting

config/breadcrumbs.rb

crumb :top_page do
  link "top page", root_path
end

crumb :mypage_top do |user|
  link "My page top", user_path(user.id)
end

Correct the description like this and eliminate the setting of root! !!

Why do you need more than one top page?

First of all, why do I usually need two or more types of top pages that only need one? This is because my portfolio was "looked better".

... there is no theoretical explanation for this

For example, when transitioning to the search result page or detail page in the portfolio, of course, the transition history from the top page is displayed.

However, the transition history when transitioning to the user information edit page in My Page is As you can see, there is no link to the top page, only a link to the top page of my page.

If this makes the transition history also display the top page, I thought that it would be a little difficult to see because there were many displays.

• Since the link to the top page is installed in the header part, you will not be stuck in My Page.

How to prepare two types of top pages?

When using gretel, basically describe only the transition destination link and display character string, and if you want to set the parent page, describe the setting separately.

config/breadcrumbs.rb

crumb :root do
  link "top page", root_path
end

crumb :mypage_top do |user|
  link 'My page top', user_path(user.id)
end

crumb :mypage_edit do |user|
  link 'Confirmation / change of member information', edit_user_registration_path
  #The user information edit page is set to be located at the top of My Page.
  parent :mypage_top, user
end

However, even if nothing is set, it will be linked to the root setting. Therefore, the top page that is linked when displaying the transition history up to the user information edit page is displayed.

"Then, just change the name to break the link with root! !! 』
So that's where the code I showed you at the beginning comes into play.

config/breadcrumbs.rb

crumb :top_page do
  link "top page", root_path
end

crumb :mypage_top do |user|
  link "My page top", user_path(user.id)
end

crumb :mypage_edit do |user|
  link 'Confirmation / change of member information', edit_user_registration_path
  #The user information edit page is set to be located at the top of My Page.
  parent :mypage_top, user
end

It becomes the code structure. By displaying the user information edit page again with this code structure, the display of the top page that is not linked disappears and the transition history from the my page top is displayed.

important point

There is one thing to keep in mind when using this implementation method.

That is, ** "You need to set the parent page for the search result page "**.

config/breadcrumbs.rb

crumb :root do
  link "top page", root_path
end

crumb :search_word do |search_word|
  link "'#{search_word}'Search results", search_path
end

Originally, it was linked to root without setting anything on the search result page, so it automatically displayed the top page, but it was renamed (in this case, Since it has been changed to top_page), the association is released and the parent page does not exist.

So

config/breadcrumbs.rb

crumb :top_page do
  link "top page", root_path
end

crumb :search_word do |search_word|
  link "'#{search_word}'Search results", search_path
  #Newly set top_Set a page called page as the parent page.
  parent :top_page
end

You can restore the original breadcrumb trail by modifying the code.

Finally

I don't think implementing more than one type of top page is that frequent, but I hope you find this article helpful when implementing it!

We would love to hear your suggestions and advice on this matter, so we welcome your comments! !!