[Rails] gretelを使ってパンくずリストの作成

はじめに
作業の流れ
gem gretelの導入
1. パンくずの設定ファイルを生成
ビューファイルでの設定
1. レイアウトファイル
2. 各ビューファイル

はじめに

webページにパンくずリストが表示されていないため、表示させたいです。

作業の流れ

gem gretelの導入
ビューファイルでの設定
RSpecを書く

gem gretelの導入

gem "gretel"

$ bundle install

パンくずの設定ファイルを生成

$ rails generate gretel:install

config/breadcrumbs.rbが生成されます。

今回は、Home > タグ > タグ編集 と表示されるように設定します。

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の部分では、パンくずの名前を設定します。

link の部分ではパンくずリストに表示されるテキストとリンク先を設定します。

parent の部分では、現在ここで作ったページの親ページを設定します。

rootの設定ではrootが一番上の改装になるので記述しません。

ビューファイルでの設定

設定したパンくずをリストをビューファイルで呼び出しましょう。

<%= breadcrumbs separator: "区切り文字" %>

レイアウトファイル

まずはすべてのページにパンくずリストを表示させたいのでレイアウトファイルに記載します。

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

コードを紐解く

== breadcrumbs style: :ol, class: 'breadcrumb'

この書き方は、bootstrapのスタイルを適用させる書き方となっています。