パンくずリストの実装

gretelの使い方

某ECサイトのコピーを作成する際に、パンくずリストの実装をしました。
いくつかgemがありましたが、コントローラを使用せずに設定ファイルとビューに記述するだけで実装できるgretelを選択しました。
あと名前が可愛い(←

パンくずリストとは

下記の画像をご覧下さい。

よくサイトで見るやつですね！
今回はこれを実装していきます。

① gretelの導入

GitHub
https://github.com/lassebunk/gretel

公式
https://www.rubydoc.info/gems/gretel

② gemのinstall

gem "gretel"

$ bundle install

③ ファイルの設定

設定ファイルを下記コマンドで作成

$ rails generate gretel:install

すると下記のファイルが生成されます。

config/breadcrumbs.rb

crumb :root do
  link "Home", root_path
end

# crumb :projects do
#   link "Projects", projects_path
# end

# crumb :project do |project|
#   link project.name, project_path(project)
#   parent :projects
# end

# crumb :project_issues do |project|
#   link "Issues", project_issues_path(project)
#   parent :project, project
# end

# crumb :issue do |issue|
#   link issue.title, issue_path(issue)
#   parent :project_issues, issue.project
# end

# If you want to split your breadcrumbs configuration over multiple files, you
# can create a folder named `config/breadcrumbs` and put your configuration
# files there. All *.rb files (e.g. `frontend.rb` or `products.rb`) in that
# folder are loaded and reloaded automatically when you change them, just like
# this file (`config/breadcrumbs.rb`).

まずはマイページをパンくずリストに記載したいので、下記のように追記します。

config/breadcrumbs.rb

# ルート
crumb :root do
  link "トップページ", root_path
end

# マイページ
crumb :mypage do
  link "マイページ", mypage_users_path
end

・ :mypage ← 設定ファイルを呼び出します。
・ "マイページ" ← パンくずリストに表示される名称です。
・ mypage_users_path ← 呼び出し元のパスを指定します。

④ ビューの設定

mypage.html.haml

-# config/breadcrumbs.rbに定義したmypageを呼び出し
- breadcrumb :mypage
-# 下記を記述した箇所にパンくずリストが表示される。
= breadcrumbs pretext: "You are here:",separator: " › "

・ pretext ← パンくずリストの先頭に挿入する文章を記述。いらない場合は設定しなくて大丈夫です。
・ separator ← パンくずの区切り文字を指定。「&rsaquo」は出力されると「›」になります。

パンくずリストの表示は、一般的に全ページに表示できるlayouts/application.html.hamlに記載することが多いかと思いますが、今回は一部のページでのみ表示させたいのと、改修を容易にする為、下記のように部分テンプレート化しています。

layouts/_breadcrumbs.html.haml

.breadcrumbs
  = breadcrumbs pretext: "",separator: " › ", class: "breadcrumbs-list"

実際のリスト呼び出しと表示結果はこのようになっています。

mypage.html.haml

- breadcrumb :mypage
= render "layouts/breadcrumbs"

⑤ 親の設定

config/breadcrumb.rbのcrumbとendの間にparentを設定することで親を設定することができます。
マイページを親に設定してプロフィールをリストに表示させましょう。

config/breadcrumbs.rb

# ルート
crumb :root do
  link "トップページ", root_path
end

# マイページ
crumb :mypage do
  link "マイページ", mypage_users_path
end

# プロフィール
crumb :profile do
  link "プロフィール", edit_user_path
  parent :mypage
end

すると以下のように表示されます。

今回参考にさせていただいた記事 https://qiita.com/you8/items/d2d37a745060b79c112f https://qiita.com/namitop/items/5bcb3b90e63af758a9b0 http://vdeep.net/rubyonrails-gretel https://doruby.jp/users/kisuzuki/entries/gretel%E3%81%A7%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90

以上がgretelを使用したパンくずリストの実装となります。