vi
new
0
Avatar
Vu Duc Luan @vu.duc.luan
316 11 22
Đã đăng vào thg 5 24, 2016 5:08 SA 5 phút đọc
1.1K

Tạo Breadcrumb cho ứng dụng web của bạn với gem breadcrumbs_on_rails

robinbreadhead.jpg

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!

Ruby on Rails

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí