【Rails】gretelを使ってパンくずリストを追加してみる。

パンくずリストとは

パンくずリストとはWEBサイト上で自分がどこにいるかをわかりやすく表示しているものになります。
下記サイト参考
https://www.asobou.co.jp/blog/web/breadcrumb-list

パンくずリストを導入することで
・ユーザビリティが高くなる
・SEOに強くなる
というメリットがあります。

今回はrailsにてパンくずリストを導入する手順を書いていきます。

導入

railsでパンくずを導入するには「gretel」というgemを使うと便利です。
■gem gretelのGithub
https://github.com/lassebunk/gretel

まずはGemfileに追記して、bundle installを行う。

Gemfile

gem 'gretel'

$ bundle install

その後起動コマンドを入力

$ rails generate gretel:install

このコマンドを入力すると、config配下にbreadcrumb.rbというファイルが生成されます。
そのファイルにパンくずの定義を書いていきます。

書き方の例を下記に示します。

breadcrumbs.rb

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

crumb :edit_admin_site do
  link '設定', edit_admin_site_path
  parent :admin_dashboard
end

crumb :admin_users do
  link 'ユーザー', admin_users_path
  parent :admin_dashboard
end

crumb crumsの名前を指定 do
  link '表示させたい文字', その文字のリンク先
  parent 親の指定
end

といった使い方になります。

ビュー側の表示は下記のように指定します。

<% breadcrumb :admin_users %>

slimの場合は

- breadcrumb :admin_users

参考

■パンくずリストについて参考にしたサイト
https://www.asobou.co.jp/blog/web/breadcrumb-list

■gem gretelのGithub
https://github.com/lassebunk/gretel