パンくずリストとは

ユーザーがサイトを使用する際、自分が今サイトのどの場所にいるのかというのをわかりやすくするための表示のことを「パンくずリスト」と言う。よくサイトの上部に見かける。

パンくずの語源は童話「ヘンゼルとグレーテル」から来ていて、今回使うgretelというgemの名前はこの「グレーテル」から名付けられている

gemをインストール

まずはGemfileにgemを記入しインストール。

gem 'gretel'
# 記入後 bundle install

次にターミナルにて実行コマンドを入力。

rails g gretel:install
# 下のコードが出力されていればインストール成功
Running via Spring preloader in process 29890
      create  config/breadcrumbs.rb

configフォルダにbreadcrumbs.rbが作成されていればOK。

設定ファイルの編集

先ほどのコマンドで作成されたconfig/breadcrumbs.rbファイルを編集していく。このファイルはパンくずリストとして表示されるそれぞれのパンくずを設定するファイルになる。

config/breadcrumbs.rb

crumb :root do
  link "Home", root_path
end

# デフォルトでは上記のような記入がある。
crumb "ページ名" do
  link "ビューに表示される名前", "リンクされるURL"
  parent :親のページ名（現在の前のページ）
end

ページ名はここで設定したパンくずの名前。
他のパンくず設定で親を定義するときや、ビューファイルでパンくずを呼び出す際の名前。

linkの部分ではパンくずリストに表示されるテキストとリンク先を設定する。

parentの部分では現在ここで作ったページの親ページは何かを設定する。

例えば上記のようにアイコンを入れることもできる。

config/breadcrumbs.rb

crumb :admin_dashboard do
  link '<i class="fa fa-dashboard"></i> Home'.html_safe, admin_dashboard_path
end

crumb :admin_tags do
  link 'タグ',admin_tags_path
  parent :admin_dashboard
end

crumb :edit_admin_tag do |tag|
  link 'タグ編集',edit_admin_tag_path(tag)
  parent :admin_tags
end

このタグ編集ページは最後の階層のページとなるので、リンクの部分の注意が必要。
最後の階層のページゆえ、現在のページの名前だけ表示されれば良いのでリンクは必要ない。

ビューファイルを編集

作成した設定ファイルをビューファイルで呼び出す記述をしていく。パンくずリストを表示させたい箇所に下記のコードを記述。

全ページで区切り文字を共通化するために、application.html.erbファイルにて記述する。区切り文字とは「Home > タグ > タグ編集」の>に該当する。

app/views/layouts/application.html.rb

<body>
    <%= breadcrumbs separator: 区切り文字 %> 
</body>

この時、<や&などはHTMLタグと認識されてしまったり、表示したい文字として認識されず表示されない場合がある。&で始まり;で終わる書き方(特殊文字)で、その中に表示させたい文字に対応するコードを記述する必要がある。

app/views/layouts/application.html.rb

<body>
    <%= breadcrumbs separator: " &rsaquo; " %>　#「>」は&rsaquo;と表記する
</body>

各ビューファイルに指定する場合は、下記のように記述する。

<% breadcrumb :設定したcrumb名 %>

参考記事

【Rails】 gretelを使ってパンくずリストを作成しよう