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には、パンくずのセパレータが指定できます。 上記コードを実行すると、以下のようなパンくずリストが生成されます。
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> ここに何か書きます
これで完成です。以下のように表示されたら成功です。