おぴよの気まぐれ日記

おぴよの気まぐれ日記

岡山やプログラミング、ファッションのこと、子育てや人生、生き方についての備忘録。

【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適用前)
パンくずリストの例(css適用前)

ただ、画像のように何も設定しないと縦並びになってしまうので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

パンくずリストの例(css適用)
パンくずリストの例(css適用)