【Rails】パンくずリストを簡単に作る Gem breadcrumbs_on_rails
Ruby on Railsで「パンくずリスト」を生成するGembreadcrumbs_on_rails
の紹介です。
導入方法
Gemfileにbreadcrumbs_on_rails
を追加してbundle install
します。
# Gemfile gem 'breadcrumbs_on_rails'
パンくずリストを登録する(Controller)
パンくずリストを表示させたいContollerのアクション内でパンくずリストを登録します。
# new_users_controller.rb def index @users = NewUser.all add_breadcrumb 'HOME', :root_url add_breadcrumb '登録ユーザーの一覧' end
使い方はadd_breadcrumb 表示する文字列, パス
です。第二引数は省略すると文字列だけ表示されます。
また、階層順になるように設定してください。上記の場合はHOME > 登録ユーザーの一覧
の並びになります。
上記の例ではアクションの中で定義していますが、アプリ全体で定義したい場合はApplicationController
で。コントローラー全体で定義したい場合はアクションの外に定義できます。なので、今回の場合は以下のように記述した方が良いかもしれないです。
class ApplicationController < ActionController::Base add_breadcrumb 'HOME', :root_url end class NewUsersController < ApplicationController add_breadcrumb 'ユーザー一覧', :new_users_path def index end def show add_breadcrumb @user.name end end
こうすることで、アクション毎に記述する必要が無くなります。この例だと、HOME > ユーザー一覧 > opiyo
みたいな感じで表示されます。
パンくずリストを表示する(View)
パンくずリストの表示方法も簡単で、以下のように記述するだけです。
.breadcrumbs %ul <li> = render_breadcrumbs separator: '</li><li>' </li>
ただ、画像のように何も設定しないと縦並びになってしまうのでcssで見た目を整えます。
.breadcrumbs %ul <li> = render_breadcrumbs separator: '</li><li>' </li> :sass .breadcrumbs text-align: center padding: 10px 0 ul li display: inline-block .breadcrumbs ul > li + li:before content: "\f105" font-family: FontAwesome padding: 0 20px display: inline-block