breadcrumbs_on_railsを利用する。
https://github.com/weppos/breadcrumbs_on_rails
手順は以下のとおり。
- gemを追加
- controllerに必要なコードを記述
- viewに必要なコードを記述
- 動く！
gemを追加
以下のコードをGemfileに追加して bundle install する。
Gemfile
gem 'breadcrumbs_on_rails'
controllerに必要なコードを記述
パンくずの設定をcontrollerで行う。
class BlogsController < ApplicationController
# 第一引数にテキスト、第二にパスを入れる
add_breadcrumb 'Home', 'http://www.example.com'
add_breadcrumb 'ブログトップ', :blogs_path
def index
end
def show
@blog_title = "今日もやる気なし"
# 第二引数を省くとリンクではない階層を作れる
add_breadcrumb '日記'
add_breadcrumb @blog_title, :blog_path
end
end
上記のサンプルだと以下のように表示されることだろう。
Home > ブログトップ > 日記 > 今日もやる気なし （separatorに「 > 」を指定した場合）
日記と今日もやる気なしはリンクにはならない。
日記の方は第二引数を指定しなかったため、ブログタイトルの方は最後の階層のためリンクにならない。
viewに必要なコードを記述
あとは簡単。
viewの任意の場所に以下のコードを追加すれば良い。
<%= render_breadcrumbs separator: ' > ' %>
これで無事表示されているはず。
オリジナルのテンプレートを使いたい場合は？
セパレーター以外にもマークアップ自体を変えたいこともあるでしょう。
そういう場合は以下のステップを踏む。
- Breadcrumbs::Builderを作成
- オリジナル用のerbを作成
- viewの呼び出しを変更
- 動く！
Breadcrumbs::Builderを作成
こんなの作る。
lib/custom_breadcrumbs_builder.rb
class CustomBreadcrumbsBuilder < BreadcrumbsOnRails::Breadcrumbs::Builder
def render
@context.render "/shared/breadcrumbs", elements: @elements
end
end
オリジナル用のerbを作成
context.renderで指定した場所にerbを作成する。
app/views/shared/_breadcrumbs.html.erb
<% 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 %>
viewの呼び出しを変更
<%= render_breadcrumbs builder: ::CustomBreadcrumbsBuilder %>
これで自分好みのパンくずリストを表示できる。