Rails3 で Twitter Bootstrap のパンくずリストを使う

使用環境


twitter-bootstrap-railsにはパンくずリストを生成する方法が標準で用意されている。render_breadcrumbsadd_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 indexendend

というふうにする。


option引数にbefore_filter形式のオプションが書ける。たとえばnewアクションの前にパンくずが置きたければ

class ArticlesController < ApplicationController
  add_breadcrumb "Articles", "/articles"
  add_breadcrumb "new", "/articles/new", :only => [:new]

  def indexend
  
  def newendend

という感じ。


アクション中にもパンくずを置ける。

class ArticlesController < ApplicationControllerdef show
    @article = Article.find(params[:id])
    add_breadcrumb @article.title, @articleendend

無理してbefore_filter風に書かずに、適当なメソッドを定義してそのなかでadd_breadcrumbしたほうがいいかも。ネストしたリソースのコントローラの場合とか。下はArticlesの下に配置されたCommentsControllerの例。

class CommentsController < ApplicationController
  before_filter :set_article
  before_filter :add_breadcrumb_of_articleprivate
    def set_article
      @article = Article.find(params[:article_id])
    end
    
    def add_breadcrumb_of_article
      add_breadcrumb @article.title, @article
    endend

追記: add_breadcrumbsっていうのを作って、まとめて追加するのがスマートかも。

class CommentsController < ApplicationController
  before_filter :set_article
  before_filter :add_breadcrumbsprivate
    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)
    endend


備考

  • 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のヘルパーメソッドを使うので)。