Rails3 で Twitter Bootstrap のパンくずリストを使う
使用環境
twitter-bootstrap-railsにはパンくずリストを生成する方法が標準で用意されている。render_breadcrumbs
とadd_breadcrumb
を使う。
使い方
(twitter-bootstrap-railsのプルリクエストのログとかソースとか見たほうが早いかも)
ソース
View側
application.html.erbの適当な場所に
<%= render_breadcrumbs %>
と書いておく。以上。
Controller側
追記: 一部動かないコードがあったので修正しましたm(__)m
パンくずを追加するときにadd_breadcrumb(name, url, option={})
を使う。たとえばArticlesControllerがあった場合に、全てのアクションの前に"Articles"というパンくずを置きたければ
class ArticlesController < ApplicationController add_breadcrumb "Articles", "/articles" def index … end … end
というふうにする。
option引数にbefore_filter形式のオプションが書ける。たとえばnewアクションの前にパンくずが置きたければ
class ArticlesController < ApplicationController add_breadcrumb "Articles", "/articles" add_breadcrumb "new", "/articles/new", :only => [:new] def index … end def new … end … end
という感じ。
アクション中にもパンくずを置ける。
class ArticlesController < ApplicationController … def show @article = Article.find(params[:id]) add_breadcrumb @article.title, @article … end … end
無理してbefore_filter風に書かずに、適当なメソッドを定義してそのなかでadd_breadcrumbしたほうがいいかも。ネストしたリソースのコントローラの場合とか。下はArticlesの下に配置されたCommentsControllerの例。
class CommentsController < ApplicationController before_filter :set_article before_filter :add_breadcrumb_of_article … private def set_article @article = Article.find(params[:article_id]) end def add_breadcrumb_of_article add_breadcrumb @article.title, @article end … end
追記: add_breadcrumbsっていうのを作って、まとめて追加するのがスマートかも。
class CommentsController < ApplicationController before_filter :set_article before_filter :add_breadcrumbs … private def set_article @article = Article.find(params[:article_id]) end def add_breadcrumbs add_breadcrumb 'Articles', articles_path add_breadcrumb @article.title, @article add_breadcrumb 'Comments', article_comments_path(@article) end … end
備考
- add_breadcrumbsで@breadcrumbs配列にパンくずが追加されていく
- @breadcrumbsの各要素はそれぞれ
link_to(name, url, option)
という形でlink_toに渡される(optionもlink_toに渡される) - render_breadcrumbsの第1引数にパンくず間の区切り文字を指定することもできる(デフォルトは
"/"
)
(追記) Gemfileの設定
twitter-bootstrap-railsのgemの指定はGemfileのassetsグループの中に書くのではなく、Gemfileのトップレベルに書いておく必要がある(twitter-bootstrap-railsのヘルパーメソッドを使うので)。