Tạo Breadcrumb cho ứng dụng web của bạn với gem breadcrumbs_on_rails
I.Giới thiệu Như các bạn đã biết, với mỗi chúng ta việc lướt web hàng ngày là điều rất thường xuyên với nhiều mục đích: học tập, làm việc, giải trí, kết nối...Và trong hàng chục tab cùng mở một lúc trên trình duyệt, đôi khi chúng ta sẽ quên mất là mình đang ở đâu trong website này, ...
I.Giới thiệu
Như các bạn đã biết, với mỗi chúng ta việc lướt web hàng ngày là điều rất thường xuyên với nhiều mục đích: học tập, làm việc, giải trí, kết nối...Và trong hàng chục tab cùng mở một lúc trên trình duyệt, đôi khi chúng ta sẽ quên mất là mình đang ở đâu trong website này, breadcrumbs trong mỗi website là công cụ hữu ích làm tăng tính tiện dụng đối với người dùng.Cái tên breadcrumbs bước ra từ câu chuyện cổ tích Grimm đầy cảm động, thế nhưng đối với ứng dụng web thì nó lại rất thực tế và đầy hiệu quả.Breadcrumb là công cụ để hỗ trợ người dùng điều hướng một trang web, xác định vị trí của trang hiện tại so với cấu trúc toàn site, không chỉ như vậy breadcrumb còn có tác dụng đặc biết với SEO!
Bài viết này chia sẻ cách sử dụng gem breadcrumbs_on_rails, một trong những gem rails được sử dụng nhiều nhất để tạo breadcumbs ngoài gretel, crummy, ariane..
II.Yêu cầu
- Sử dụng rails 3 hoặc rails 4
Lưu ý:
- BreadcrumbsOnRails 2.x yêu cầu Rails 3.Sử dụng BreadcrumbsOnRails 1.X với Rails 2.
- BreadcrumbsOnRails không tương thích với Rails 2.1 hoặc thấp hơn
III.Cài đặt
Chúng ta vẫn có 2 cách cài đặt thân thuộc
$ gem install breadcrumbs_on_rails
Hoặc thêm vào gem file
gem "breadcrumbs_on_rails"
Sử dụng Bundler và :git option nếu muốn sử dụng phiên bản cuối cùng từ Git repository.
IV.Sử Dụng
Việc tạo một thanh breadcrumbs navigation menu là tương đối dễ dàng. Ở trong controller, chúng ta gọi phương thức add_breadcrumb để thêm mới một node vào trong breadcrumb.add_breadcrumb yêu cầu 2 tham số là tên và đường dẫn.
class MyController add_breadcrumb "home", :root_path add_breadcrumb "my", :my_path def index # ... add_breadcrumb "index", index_path end end
Để ý tới "Breadcrumb Element" chúng ta sẽ tìm hiểu kĩ hơn về tên và đường dẫn.
Chúng ta có lựa chọn thứ 3 về tham số truyền vào của method add_breadcrumb là lựa chọn để customize breadcrumb link.
class MyController def index add_breadcrumb "index", index_path, title: "Back to the Index" end end
Ở trong view chúng ta render ra breadcrumbs menu với render_breadcrumbs helper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>untitled</title> </head> <body> <%= render_breadcrumbs %> </body> </html>
render_breadcrumbs được hiểu như là đã giới hạn các tùy chọn.Tuy nhiên trong ví dụ sau chúng ta sẽ thay đổi kí tự phân cách trong breadcrumbs với options :separator.
<body> <%= render_breadcrumbs separator: " / " %> </body>
Chúng ta hay có các tùy chọn như sau:
- separator:
- tag:
Để sử dụng Boostrap chúng ta có thể viết theo cách sau:
<body> <ol class="breadcrumb"> <%= render_breadcrumbs tag: :li, separator: "" %> </ol> </body>
V.Breadcrumb Element
Một Breadcrumb menu được tạo nên bởi các đối tượng Element. Mỗi đối tượng có hai thuộc tính: tên của breadcrumb và đường dẫn của nó.
Khi bạn gọi phương thức add_breadcrumb, method này tự động tạo ra một object Element mới cho bạn và append nó vào breadcrumb stack.Tên và đường dẫn của một Element có thể ở một trong các dạng dưới đây:
- Symbol
- Proc
- String
Symbol
Nếu giá trị là một Symbol, thư viện sẽ gọi phương thức tương ứng được khai báo với nội dung tương tự và set thuộc tính cho Element sau đó trả về giá trị.
class MyController # The Name is set to the value returned by # the :root_name method. add_breadcrumb :root_name, "/" protected def root_name "the name" end end
Proc
Nếu giá trị là một Proc, thư viện sẽ gọi proc qua trạng thái hiện tại hiện tại như một tham số và set thuộc tính vủa Element rồi trả về giá trị.Đó là một cách hữu dụng để tạm hoãn việc thực hiện truy cập vào một số phương thức/biến đặc biệt đã được tạo trong controller.
class MyController # The Name is set to the value returned by # the :root_name method. add_breadcrumb Proc.new { |c| c.my_helper_method }, "/" end
String
Nếu giá trị là String, thư viện sẽ set thuộc tính của Element là giá trị có kiểu string.
class MyController # The Name is set to the value returned by # the :root_name method. add_breadcrumb "homepage", "/" end
Giới phạm vi của breadcrumb
Phương thức add_breadcrumb hiểu tất cả các lựa chọn mà bạn sử dụng để pass qua một Rails controller filter.Trên thực tế đằng sau method đó sử dụng before_filter để lưu trữ một tab trong biến @breadcrumbs.
Sử dụng các tùy chọn của Rails filter bạn có thể chọn một nhóm các action trong controller tương ứng.
class PostsController < ApplicationController add_breadcrumb "admin", :admin_path add_breadcrumb "posts", :posts_path, only: %w(index show) end class ApplicationController < ActionController::Base add_breadcrumb "admin", :admin_path, if: :admin_controller? def admin_controller? self.class.name =~ /^Admin(::|Controller)/ end end
Viết sao cho ngắn gọn?
Nếu cấu trúc breadcrumb của bạn khá dài và có những Element bạn gọi lại nhiều lần thì sao nhỉ? Chúng ta có thể dùng helper để xử lí việc đó mà, ví dụ ở đây mình sẽ viết trong app/helper/application_helper.rb
def add_breadcrumb_path resource add_breadcrumb t("breadcrumbs.#{resource}.all"), "admin_#{resource}_path".to_sym end def add_breadcrumb_edit resource add_breadcrumb t "breadcrumbs.#{resource}.edit" end
và gọi ra trong controller như thế này nhé:
def edit add_breadcrumb_path "courses" add_breadcrumb @course.name, :admin_course_path add_breadcrumb_edit "courses" end
Ở trong config/locals/en.yml
en: breadcrumbs: paths: "Home" courses: all: "All Courses" edit: "Edit"
Và cuối cùng tất nhiên dù ở đâu mình cũng phải có Element "Home" để quay lại trang chủ chứ nhỉ.Mình sẽ để nó trong controller/application_controller.rb
class ApplicationController < ActionController::Base #... add_breadcrumb I18n.t("breadcrumbs.paths"), :root_path end
Kết quả chúng ta sẽ có một menu breadcrumb navigatioon:
Home / All Courses / Ruby / edit
IV.Kết luận
Trên đây là bài giới thiệu đơn giản về cách sử dụng gem breadcrumbs_on_rails, hãy thử sử dụng và kiểm nghiệm giá trị của nó mang lại nhé, trang web của bạn sẽ tiện dụng hơn một chút rồi đó.Enjoy it!
