パンくずリストの実装

# gretelの使い方

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


## パンくずリストとは

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

<img width="515" alt="スクリーンショット 2019-06-24 23.47.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413792/d1cc79f8-cc06-d276-b392-3856fff0ec69.png">

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

## ① 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`).
```

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

```config/breadcrumbs.rb
# ルート
crumb :root do
  link "トップページ", root_path
end

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

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

## ④ ビューの設定

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

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

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

```layouts/_breadcrumbs.html.haml
.breadcrumbs
  = breadcrumbs pretext: "",separator: " &rsaquo; ", class: "breadcrumbs-list"
```
<br>
実際のリスト呼び出しと表示結果はこのようになっています。

```mypage.html.haml
- breadcrumb :mypage
= render "layouts/breadcrumbs"
```

<img width="515" alt="スクリーンショット 2019-06-25 0.49.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413792/0103c2d0-7940-fdec-cd0b-0e7221fc7d60.png">

## ⑤ 親の設定

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

```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
```
すると以下のように表示されます。

<img width="515" alt="スクリーンショット 2019-06-25 0.58.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413792/79e1047c-e2a4-8c60-ddc9-ed61f2e8383f.png">
<br>
今回参考にさせていただいた記事
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を使用したパンくずリストの実装となります。