breadcrumbs_on_railsがオススメ
breadcrumbs_on_rails はbootstrapに限らずパンくずリスト(Breadcrumbs)の実装が簡単に出来るのでオススメです。
インストール方法
Gemfileに下記を追記：
gem "breadcrumbs_on_rails"
$ bundle installでサクっとインストールしましょう。
基本の使い方
controllerに記述する
class MyController
add_breadcrumb "home", :root_path
add_breadcrumb "my", :my_path
def index
# ...
add_breadcrumb "index", index_path
end
end
app/controllers/application_controller.rbに追加する事で、サイト全体でデフォルトのパンくずアイテムを追加出来ます。
「ホーム」みたいな項目はそっちに記述するといいかと思います。
viewに記述する
slimだと以下のような感じでOK：
- title "タイトル"
- add_breadcrumb title, request.fullpath
controllerで指定したものの後に追加されます。
viewに書く方がMVCアーキテクチャにより適合していますね。
出力する
app/views/layouts/application.html.slimなどの任意の行に下記を追記しましょう。
= render_breadcrumbs
Bootstrap 3で使う
上記の手順でパンくずリストを出力すると、下記のように単純にaタグの羅列になります。
<a href="http://odoruinu.net/">Home</a> > <a href="/blog">Blog</a> > <a href="/blog/page">Page</a>
ここでは、bootstrap 3のスタイルで書きたいので下記のように出力して欲しいところ：
<ol class="breadcrumb">
<li><a href="http://odoruinu.net/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li class="active">Page</li>
</ol>
Bootstrap用ビルダーを作る
breadcrumbs_on_railsではカスタムなフォーマットでパンくずリストを出力するための方法が用意されています。
これを Builder と呼びます。
さっそくBootstrap用のBuilderを作ってみましょう。
以下のような内容をlib/bootstrap_breadcrumbs_builder.rbに作ります：
class BootstrapBreadcrumbsBuilder < BreadcrumbsOnRails::Breadcrumbs::Builder
def render
@context.render "/application/breadcrumbs", elements: @elements, b: self
end
def compute_name(element)
case name = element.name
when Symbol
@context.send(name)
when Proc
name.call(@context)
else
name.to_s
end
end
def compute_path(element)
case path = element.path
when Symbol
@context.send(path)
when Proc
path.call(@context)
else
@context.url_for(path)
end
end
end
そして、app/views/application/_breadcrumbs.html.slimに以下のようなファイルを作ります。
- unless elements.length==1 && current_page?( b.compute_path(elements[0]) )
ol.breadcrumb
- elements.each do |element|
li class=( "active" if current_page?( b.compute_path(element) ) )
=link_to_unless_current b.compute_name(element), b.compute_path(element), element.options
最後に、レイアウトのファイルに以下のように追記すればOK！
#!slim
= render_breadcrumbs builder: ::BootstrapBreadcrumbsBuilder
バッチリ！
![[iOS] チップスの吹き出しを簡単に表示する方法](../../../odoruinu.files.wordpress.com/2013/12/687474703a2f2f6661726d352e7374617469632e666c69636b722e636f6d2f343030352f353139313634313033305f326239336134613535392e6a7067ae1c.jpg?w=266&h=500&crop=1)
