Rails中Breadcrumb的介绍

190 阅读1分钟

在大多数软件应用中,面包屑是一种常见的UI模式。Rails没有专门针对面包屑的内置工具,虽然 一些 现有的 宝石,但我认为这是你只需几行代码就能在自己的应用中轻松实现的。

最终,你会希望控制你的应用程序中的面包屑显示方式,所以你不妨拥有这个功能的所有代码。

使用方法

首先,为Breadcrumb 添加一个模型。这个模型可以存在于app/models 文件夹中,但不需要是ActiveRecord模型,因为我们不需要它持久化到数据库中:

class Breadcrumb
  attr_reader :name, :path

  def initialize(name, path)
    @name = name
    @path = path
  end

  def link?
    @path.present?
  end
end

接下来给你的ApplicationController 添加一个方法来存储和添加面包屑:

class ApplicationController < ActionController::Base
  ...

  helper_method :breadcrumbs

  def breadcrumbs
    @breadcrumbs ||= []
  end

  def add_breadcrumb(name, path = nil)
    breadcrumbs << Breadcrumb.new(name, path)
  end
end

然后在你的布局中,你可以以你喜欢的方式呈现面包屑。在我的应用程序中,我在<title> head标签和页面标题中都使用面包屑:

<head>
  <title>
    <%= breadcrumbs.map(&:name).reverse.append("My App").join(" | ") %>
  </title>
</head>

<nav>
  <ol class="breadcrumbs">
    <% breadcrumbs.each do |crumb| %>
     <li>
      <% if crumb.link? %>
        <%= link_to crumb.name, crumb.path, class: "breadcrumb-link" %>
      <% else %>
        <span class="breadcrumb-page">
          <%= crumb.name %>
        </span>
      <% end %>

      <% unless crumb == breadcrumbs.last %>
        <span class="breadcrumb-separator">/</span>
      <% end %>
     </li>
    <% end %>
  </ol>
</nav>

这是一个简单的API,但这个模型将允许你在你的每个控制器中添加面包屑。如果你希望它是一个链接,面包屑可以包括一个可选的path

你可以在before_actions ,或者在每个动作里面设置面包屑。你可以添加条件逻辑,就像任何常规的Ruby代码一样:

class PostsController < ApplicationController
  before_action :set_breadcrumbs

  def index
    @posts = Post.all
  end

  def show
    @post = Post.find(params[:id])

    add_breadcrumb(@post.title, @post)
  end

  def new
    @post = Post.new

    add_breadcrumb("New Post")
  end

  private

  def set_breadcrumbs
    add_breadcrumb("Admin", admin_home_path) if Current.user.admin?
    add_breadcrumb("Posts", posts_path)
  end
end