こんにちは、りゅうじです。

パンくずリストとは？gretelでの作成の仕方を勉強したのでアウトプットしていきます。

結論と全体の手順

パンくずリスト

パンくずリストは、通常ページの上部に表示され、今訪問者がサイトのどこの階層にいるのかを伝えるリンクの事。

どういうものかイメージつかない方もいるかと思います(私もそんなのあったっけ？ってなりました)これです！

この画像では今いるページがタグ編集であり、親ページにあたるタグ一覧とHomeがリンクになっていてクリックすると移動できるやつです。

このパンくずリストをgretelという名前のGemで簡単に作成できます。

パンくずリスト＝gretel

と覚えておけばスムーズです。

Gemのgretelを使って作成手順

インストール
ファイルの作成
ビューの設定

1.インストール

#Gemfile
gem 'gretel'

このように Gemfile に記載

#ターミナル
$ bundle install --path vendor/bundle

これでインストール完了です！

2.ファイルの作成

#ターミナル
$ rails g gretel:install

入力すると config/breadcrumbs.rb が生成されるのでその中に設定を記載。

#config/breadcrumbs.rb
crumb :admin_tags do
  link 'タグ一覧', admin_tags_path
  parent :admin_dashboard
end

crumb :edit_admin_tag do |tag|
  link 'タグ編集', edit_admin_tag_path(tag)
  parent :admin_tags
end

おお！なんか書いてあるけど初見だとよくわからないですよね！

しかしわかれば簡単です。説明します。

まずタグ一覧の方の雛形はこうです。

crumb :設定の名前(わかれば何でもいい) do
  link 'ビューに表示される名前', リンク先のURL
  parent :親のページ名(今いる前のページ)
end

もうわかった！って感じですよね。

ここで一つ調べる必要があるとすれば path ですよね。

ターミナルで rails routes と打てば一覧が出てくるのでそこから該当の path を記載すれば大丈夫です。

では、もう一つのタグ編集の方行きましょう！

crumb :edit_admin_tag do |tag|
  link 'タグ編集', edit_admin_tag_path(tag)
  parent :admin_tags
end

違いだけを見ましょう！

|tag| とリンク先のURLの後にある (tag) ですよね！

これは id が必要な時はこういう書き方をするって覚えれば大丈夫です。

今回は tag ですがそこは適宜変更をよろしくお願いします＾＾

3.ビューの設定

まずはビューの総監督的存在の

app/views/layouts/application.html.erb から行きましょう！

ここに

#app/views/layouts/application.html.erb
<body>
<%= breadcrumbs separator: " &rsaquo; " %>
<%= yield %>
</body>

書き方としてこういう風に書くんだなってのはもちろん頭に入れてもらいたいのですが、ここでのポイントは2つです！

breadcrumbs が複数形である事
" &rsaquo; " はパンくずのリンクの間にある > だという事

私はしては1が重要ですね。総監督のビューには複数形で書くと覚えておいてください＾＾

総監督の次は選手です。

選手的存在のビューには

今回の場合だと管理者専用のタグの編集と一覧ページです。

一覧ページ

#app/admin/tags/index.html.erb
<% breadcrumb :admin_tags %>

雛形としては

<% breadcrumb :設定したcrumb名 %>

さっき書いたcrumbの後のわかれば何でもいいよ！ってところの名前です！

どこに書くの？ってなりますよね。

どこでもいいです！

今回、総監督が場所の指示をしてくれているので選手は考えなくて大丈夫！(私は一番上に書きました＾＾)

ここでまた2つポイントです！！

breadcrumb は単数形である事
<%= ではなく <% を使用している事

今回は両方とも重要です。

ちなみに1を複数形にしてしまうとこんなエラーが出ます。

no implicit conversion of Symbol into Integer

訳:シンボルから整数への暗黙の変換はありません

私はこれに気付くのに少し時間かかってしまったので、この記事を読んでくれた方は私と同じ過ちを犯さないようにして頂けると書いている甲斐があるってものです＾＾

最後に編集ページ行きましょう！

編集ページ

#app/admin/tags/edit.html.erb
<% breadcrumb :edit_admin_tag, @tag %>

, で区切り @tag が最後に付いているところだけを理解して頂けたら十分ですね！

, 忘れがちなのでお気をつけて！

@tag は id です！

わかりやすく言うと

<% breadcrumb :edit_admin_tag, @tag %>
                                 ↓ここに代入される
　　　　crumb :edit_admin_tag do |tag|
  　　　　link 'タグ編集', edit_admin_tag_path(tag)
  　　　　parent :admin_tags
　　　　end

こういう事です！

id が絡んできたら選手的存在のビューにも知らせてあげる必要が出てくると頭の片隅に覚えておけばいいかと思います。

またパンくずリスト設定するときはよければ私の記事を参考にしてみてください＾＾

最後に

読んで頂いた方、ありがとうございました。

これからアウトプットのブログを更新していくのでよろしくお願い致します。

りゅうじの学習blog

学習したことをアウトプットしていきます。

パンくずリストとは？gretelでの作成の仕方

結論と全体の手順

1.インストール

2.ファイルの作成

3.ビューの設定

最後に