パンくずリスト

Webページの上部(?)に表示される現在地の階層みたいな表示のこと。これがあることによって以下のメリットがある。

ユーザーがどのページを読んでいるのか瞬時に分かる
Webサイトの検索順位を決める要素を収集するクローラーの巡回を手助けする
↑に付随し、SEO(検索エンジン最適化)に有効

gem: gretelを使用

gem 'gretel'
# bundle install

rails g gretel:install

↑このコマンドにより、config配下にbreadcrumbs.rbというファイルが作成される

# 他のパンくず設定で親ページを指定する際、ビューファイルでパンくずを呼び出す際に使用
crumb :edit_admin_site(パンくず名) do
# リストに表示されるテキストとリンクされるURL
  link '設定', edit_admin_site_path
# 現ページの前のページ(親ページ名)
  parent :admin_dashboard  
end

詳細画面のパンくずリスト

詳細画面なので固有のidが必要

crumb :user_show do |user|
  link "#{user.name}さんの詳細", user_path(user)
  parent :root
end

ブロック変数を使う
→ブロック変数の中身はこのパンくずをビューファイルで呼び出すときや、子となるパンくずうの設定内で定義する
リストに表示する文字は式展開を使うことが可能（いつものlink_toと一緒）

ビュー

<% breadcrumb :user_show, @user %>

インスタンス変数はコントローラで定義されているものを使用
ブロック変数に渡すため、呼び出し時に変数記載
application.html.erbへの記載により、各ビューでの呼び出し時には表示させたい箇所に記載する必要がない(後述)

編集ページ

crumb :user_edit do |user|
  link "ユーザー編集"
  parent :user_show, user
end

ユーザー編集の親ページである詳細画面にも固有のuser.idが必要なため、userを記載する

<% breadcrumb :user_edit, @user %>

パンくずリストの区切り文字

Home > ○○さんの詳細画面 > ユーザー編集

区切り文字とは文字通り、リストを区切っている「>」のような文字

<!-- app/views/layouts/application.html.erb -->
<body>
  <%= breadcrumbs separator: "区切り文字" %>
  <%= yield %>
</body>

パンくずリストは全ページに表示させたいので、application.html.erbの表示させたい箇所に記載
区切り文字はseparator: "区切り文字"のように指定
ただし、「>」はHTMLの閉じタグの意味を持つのでそのまま使うのは良くない

<%= breadcrumbs separator: " &rsaquo; "%>

&で始まり、;で終わる書き方でその中に表示させたい文字に対応するコードを記述する

その他

main.content-wrapper
        section.content-header
          h1
            = yield 'content-header'
          == breadcrumbs style: :ol, class: 'breadcrumb'