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

学習記録

はじめに

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のスタイルを適用させる書き方となっています。

各ビューファイル

各ページでは=では無い点に注意しましょう。

- breadcrumb :admin__tags
- breadcrumb :edit_admin_tag, @tag

コメント

タイトルとURLをコピーしました