パンくず機能の設定

パンくず機能とは

Image from Gyazo

web上で自分がどの階層にいるのか、視覚的に分かりやすくしてくれます。


実装

gem gretelの導入

  gem 'gretel'

bundle installをします。


ターミナル上でrails g gretel: install

config/breadcrumbs.rbが生成されます。
今回は、Home > 著者 > 著者編集と表示されるように設定します。 breadcrumbs

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

 crumb :admin_authors do
   link '著者', admin_authors_path
   parent :admin_dashboard
 end

 crumb :edit_admin_author do |author|
   link '著者編集', edit_admin_author_path(author)
   parent :admin_authors
 end

parentというのは、この記述をしたビューがどのビューの子要素的な階層になるかを指定します。


View

app/views/layouts/admin.html.slim

         h1
            = yield 'content-header'
          == breadcrumbs style: :ol, class: 'breadcrumb'

app/views/admin/authors/index.html.slim

 = content_for 'content-header' do
   | 著者

 - breadcrumb :admin_authors

app/views/admin/authors/edit.html.slim

 = content_for 'content-header' do
   | 著者編集

 - breadcrumb :edit_admin_author, @author

著者編集ページで、@authorのつけ忘れに注意してください。