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

●前書き

某ECサイトのコピーサイトを作成しています。

今回はいわゆる、「パンくずリスト」を実装していきます😊

●パンくずリストとは？

パンくずリストとは、「Webサイト上でユーザーが今、どの位置にいるのか」を見て分かるようにするのリストです。

ヘッダーの下辺りに表示されていること殆どだと思います。
なぜ「パンくず」というのかは、、知りませんww

上の写真の（トップページ→マイページ）みたいに、階層順に表示されています。

" gretel " というgemを使って実装していきます。

（名前、かわいいなww）

早速、いきましょう♫

●gretel導入

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

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

●gretelをインストール

Gemfileにこちらを記載

gem "gretel"

$ bundle install

忘れずに、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`).

では、追記していきます。

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

crumb :muypages do
  link "マイページ", mypages_path
 parent :root
end

---------------------------------------------------------------------

:mypage  設定したファイルを呼び出しています。

"マイページ"  ここに記載したテキストがパンくずリストに表示されます。

mypages_path  呼び出し元のパスを指定します。※rails routesで調べてね

--------------------------------------------------------------------------------

●　ビューを作成していきます。

※今回は実装を焦点を当てたいのでCSSのの記述を省きます。

●ビューを部分テンプレート化します

layouts/_breadcrumbs.html.haml

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

----------------------------------------------------------

pretext → パンくずリストの先頭に挿入するテキストを記述します。何も記述しないので「" "」としています。

separator → パンくずの区切り文字を指定しています。「&rsaquo」と記述すると「>」になります。

-----------------------------------------------------

●呼び出したいビューに記述します

- breadcrumb :mypages
= render "layouts/breadcrumbs"

ここまできたらこのようなビューになります。

次にマイページのより深い階層に遷移していきます。

config/breadcrumbs.rb

の中で親となる階層を「parent」とするように記述していきます。

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

crumb :mypages do
  link "マイページ", mypages_path
 parent :root
end

crumb :mypage do
  link "プロフィール", mypage_path
 parent :mypages
end

このように記述すると・・・

こんな感じになります。

●まとめ

今回は、名前がとってもファンタジーなgem、「gretel」を使ってパンくずリストを作成しました。

至らない点、間違っている点など御座いましたらご指摘いただけると嬉しいです。

それでは、また宜しくお願いします😄