vi
new
+3
Avatar
Tran Thanh Tam @zanichi
635 16 30
Đã đăng vào thg 12 5, 2017 8:15 SA 6 phút đọc
347

Tạo Breadcrumb cho websites sử dụng gem breadcrumb_on_rails

1. Breadcrumb là gì?

  • Breadcrumb là tập hợp các đường link phân cấp giúp người dùng biết mình đang ở vị trí nào của websites, và có thể dễ dàng di chuyển sang các trang khác trên websites.

  • Nếu một websites có cấu trúc đồ sộ, phức tạp mà lại không có breadcrumb thì người dũng dễ bị "Lạc". Breadcrumbs thường xuất hiện ngay trên đầu website, và được đặt ở ngay dưới phần đầu (Top) hay dưới thanh tiêu đề hoặc headers. Chúng cung cấp cho khách hàng những liên kết để quay lại trang trước có cấp cao hơn và tiện theo dõi vị trí hiện tại của mình trên trang.

  • Một breadcrumbs điển hình sẽ có mẫu như sau: Trang đã xem 1 > Trang đã xem 2 > Trang hiện tại hoặc Trang chủ > Chuyên Mục > Trang con Hoặc cũng có thể sắp sếp theo thứ tự các trang mình đã xem theo thời gian.

  • Khi webstite không có breadcrumb hiển thị trên google như đường link URL:

  • Khi có breadcrumb google sẽ hiển thị như sau: Và đương nhiên websites có breadcrumb sẽ được Google sẽ đánh giá cao hơn vì đơn giản là nó mang lại sự tiện lợi cho người sử dụng.

2. Sử dụng gem breadcrumb_on_rails

2.1 Cài đặt

Cách 1:$ gem install breadcrumbs_on_rails Cách 2: Thêm gem "breadcrumbs_on_rails" vào gem file và chạy bundle

2.2 Sử dụng

2.2.1 Thêm node vào breadcrumb:

  • Ở trong controller, chúng ta gọi phương thức add_breadcrumb để thêm mới một node vào trong breadcrumb.
  • Phương thức add_breadcrumb yêu cầu Tối thiểu 2 tham số là: tên của breadcrumb và đường dẫn mình mong muốn.
    class MyController
  add_breadcrumb "home", :root_path
  add_breadcrumb "page_1", :page_1_path

  def index
    # ...
    add_breadcrumb "index", index_path
  end
end
  • Ngoài ta có thể truyền thêm tham số thứ 3 dưới dạng một hash để chúng ta có thể thoải mái customize breadcrumb link ví dụ như: ta có thể thêm tham số title để custom title của breadcrumb:
    class MyController
  def index
    add_breadcrumb "index", index_path, title: "Back to the Index page"
  end
end

2.2.2 Render breadcrumb menu ra view:

  • Sử dụng method render_breadcrumbs

    <!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>Breadcrumb example</title>
    </head>

    <body>
      <%= render_breadcrumbs %>
    </body>
</html>

  • Chúng ta có thể customize render_breadcrumbs với các options mà gem đã cung cấp như việc thay đổi kí tự phân cách trong breadcrumbs với options: separator:. hoặc ta có thể dùng để tag: để thêm thẻ html bao bọc breadcrumb menu.

    <body>
  <%= render_breadcrumbs separator: " / " %>
</body>

Kết quả đạt được sẽ giống như sau: Home/index

  • Để sử dụng boostrap ta có thể dùng như sau:
    <body>
  <ol class="breadcrumb">
    <%= render_breadcrumbs tag: :li, separator: "" %>
  </ol>
</body>

2.2.3 Breadcrumb Element

  • Như đã đè cập từ trước một Breadcrumb menu được tạo nên bởi các đối tượng Element. Mỗi Element có 2 thuộc tínhlà: tên và đường dẫn.

  • Khi bạn gọi phương thức add_breadcrumb, method này tự động tạo ra một object 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.

    a) 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

b) 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

c) 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

2.2.4 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 để thông qua một Rails controller filter. Thực tế đằng sau method đó chính là sử dụng before_filter để lưu trữ một chuyển hướng 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

2.2.5 Internationalization and Localization

  • BreadcrumbsOnRails tương thích với tiêu chuẩn của Rails internationalization framework.
  • Nếu muốn localize breadcrumb menu của bạn, bạn có thể khai báo trong file .yml như sau:
    # config/locales/en.yml
en:
  breadcrumbs:
    homepage: Homepage
    first: First
    second: Second
    third: Third

# config/locales/it.yml
it:
  breadcrumbs:
    homepage: Homepage
    first: Primo
    second: Secondo
    third: Terzo
  • Và trong My controller bạn có thể sử dụng I18n như sau:
    class PostsController < ApplicationController
  add_breadcrumb I18n.t("breadcrumbs.first"),  :first_path
  add_breadcrumb I18n.t("breadcrumbs.second"), :second_path, :only => %w(second)
  add_breadcrumb I18n.t("breadcrumbs.third"),  :third_path,  :only => %w(third)
end

class ApplicationController < ActionController::Base
  add_breadcrumb I18n.t("breadcrumbs.homepage"), :root_path
end

3. Kết luận

Trên đây mình đã giới thiệu cho các bạn về breadcrumb và làm cách nào để tạo một breadcrumb cho trang web của mình. Bạn có thể tham khảo thêm ở Tài liệu tham khảo.

Breadcrumbs Gem breadcrumb_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í