読者です 読者をやめる 読者になる 読者になる

nishio-dens's diary

Railsとかプログラミング関連の備忘録

Railsでパンくずリストを作るなら、breadcrumbs_on_railsがオススメ

RailsなWebシステムにパンくずを組み込むなら、breadcrumbs_on_railsがオススメです。 スマートな記述で簡単にパンくずが作れますし、カスタマイズも容易に行えます。

導入も簡単で、Gemfileに

gem "breadcrumbs_on_rails"

と記述し、bundle install するだけでOKです。

controllerには、以下のコードのように add_breadcrumb を追加するだけで、簡単にパンくずが生成できます。

class BlogsController < ApplicationController

  add_breadcrumb 'Home', 'http://densan-labs.net'
  add_breadcrumb 'NishioのBlog', :blogs_path
  add_breadcrumb '詳細ページ', :blog_path, only: [:show]

  def index
  end

  def show
    # add_breadcrumb 'ここにadd_breadcrumbを書いてもいいよ', :blog_path
  end
end

add_breadcrumb の第一引数にはタイトルを、第二引数にはpathを指定します。 only指定で特定のactionの場合にのみ、パンくずの要素を追加することもできます。

あとは、viewに render_breadcrumbs を記述して完成です。

<h1>詳細ページ</h1>
<%= render_breadcrumbs separator: ' > ' %>

<h2>テスト本文<h2>
ここに何か書きます

render_breadcrumbsには、パンくずのセパレータが指定できます。 上記コードを実行すると、以下のようなパンくずリストが生成されます。

f:id:nishio-dens:20130824232909p:plain

Breadcrumbs::Builderを利用して、パンくずリストをカスタマイズする

先ほどのパンくずリストは、

<a href="http://densan-labs.net">Home</a> > <a href="/blogs">NishioのBlog</a> > 詳細ページ > ここに何か書いてもいいよ

というHTMLが生成されていました。

ただ、実際のWebサイトでは、単に区切り文字 > だけのパンくずなんてありませんよね。

例えば、Twitter Bootstrapのパンくずリストを組み込みたい場合、

  <ul class="breadcrumb">
    <li>
      <a href="http://densan-labs.net">Home</a>
      <span class="divider">/</span>
    </li>
    <li>
      <a href="blogs_path">NishioのBlog</a>
      <span class="divider">/</span>
    </li>

    詳細ページ
  </ul>

みたいなHTMLを生成してほしいわけです。

そんな時は、自作のBreadcrumb::Builderを作成してやる必要があります。

まずはcustom builderを作成。例えば、lib/custom_breadcrumbs_builder.rb に以下のようなコードを記述します。

class CustomBreadcrumbsBuilder < BreadcrumbsOnRails::Breadcrumbs::Builder
  def render
    @context.render "/shared/breadcrumbs", elements: @elements
  end
end

app/views/shared/_breadcrumbs.html.erb には、以下のようなviewを作成します。

<% if elements.present? %>
  <ul class="breadcrumb">
    <% elements[0..-2].each do |element| %>
    <li>
    <% if element.path.present? %>
      <a href="<%= element.path %>"><%= element.name %></a>
    <% else %>
      <%= element.name %>
    <% end %>
      <span class="divider">/</span>
    </li>
    <% end %>

    <%= elements.last.name %>
  </ul>
<% end %>

上記コードが、パンくずを生成する部分です。

あとはrender_breadcrumbs に、作成したCustomBreadcrumbsBuilderを使ってパンくずを生成するよう、builder指定を追加します。

<h1>詳細ページ</h1>

<%= render_breadcrumbs builder: ::CustomBreadcrumbsBuilder %>

<h2>テスト本文<h2>
ここに何か書きます

これで完成です。以下のように表示されたら成功です。

f:id:nishio-dens:20130824232924p:plain