gretelを使ってパンくずリストを作成する方法【rails】

Rails Ruby gretel

はじめに

railsアプリにgretelというGemを使ってパンくずリストを作成する方法について

設定方法

まずはGemをインストールします。

gem 'gretel'

$ bundle install

続いてgretelをインストールします。

$ rails g gretel:install

上記のコマンドを実行すると、

config配下にbreadcrumbs.rbというファイルが作成されます。

このファイルにパンくずリストの設定をしていきます。

crumb :root do
  link "Home", root_path
end

ファイルにはデフォルトでルートページのパンくずが設定されています。

設定方法としては以下の通りです。

crumb 'パンくずの名前' do
  link 'リンクテキスト', 'URL'
  parent :'親のパンくずの名前'
end

パンくずの名前は、ビューでパンくずを設定するときや、

parentで指定するときに使います。

今回はroot_pathをユーザー一覧ページとして、その配下にユーザー詳細ページ、そしてユーザー編集ページがあると仮定してパンくずリストを作ります。

つまりこんな感じになるように設定します。

ユーザー一覧 > ユーザー詳細 > ユーザー編集

　　　　　　　　　↓　↓　↓

Home > ユーザー名さんの詳細 > ユーザー名さんの編集

先程のファイルにパンくずの設定を追加します。

crumb :root do
  link "Home", root_path
end

crumb :user_show do |user|
  link "#{user.name}さんの詳細", user_path(user)
  parent :root
end

crumb :user_edit do |user|
  link "#{user.name}さんの編集"
  parent :user_show, user
end

ユーザー詳細ページへのリンクには、

ユーザーのIDが必要になるのでブロック変数を使います。

この変数の中身は、ビュー側でパンくずリストを呼び出すときに、引数として渡します。

ではビューの設定をします。

まずはHomeの部分の設定です。

  <body>
    <%= breadcrumbs separator: " &rsaquo; " %> 
    <%= yield %>
  </body>

Homeの部分のパンくずは、すべてのページで使用されるのでレイアウトファイルに設定をします。

&rsaquo;は特殊文字といって、今回の場合は>を表します。

separatorとは名前の通り、それぞれのパンくずの区切りの文字を指定します。

続いて、詳細ページと編集ページのパンくずを設定します。

基本的な設定の仕方は以下の通りです。

<% breadcrumb :'パンくずの名前' %>
<% breadcrumb :user_show, @user %>

<% breadcrumb :user_edit, @user %>

詳細ページと編集ページのパンくず側の設定では、ブロック変数を使っているので、

コントローラで@userを設定して、ビューでは上記のように引数として@userを渡します。

これでパンくずリストの設定は完了です！