gretelを使用したパンくずリストの作成

１. gretelをインストールした後、以下のコマンドを実行する

# Gemfile

gem 'gretel'
=> bundle installコマンドを実行

以下のコマンドを実行することで、config配下にbreadcrumb.rbというファイルが生成される。

% bin/rails generate gretel:install

２. 設定ファイルを編集する

生成されたファイルを確認すると、以下のようになっている。

# config/breadcrumb.rb

crumb :issues do
  link "All issues", issues_path
end

crumb :issue do |issue|
  link issue.title, issue_path(issue)
  parent :issues
end

:issueの部分はパンくずの名前になる。
他のパンくず設定で親(parentの部分)を定義するときや、以降で設定するviewファイルでパンくずを呼び出す際の名前を設定する。
linkの部分はパンくずリストに表示されるテキストとリンク先を設定する(書き方はRailsのヘルパーメソッドのlink_toと同様)。
URI Patternが/issues/:idのような、issueのidをパスに含める必要がある場合には|issue|のようにブロック変数を渡す必要がある。
parentの部分は現在ここで作ったページの親ページが何かを設定する。今回の場合、:issueだと:issuesが親に相当する。

３. viewファイルを編集する

最初に、パンくずリストを表示させたい箇所に以下のコードを記述する。

<%= breadcrumbs separator: " &rsaquo; " %>

separator: " &rsaquo; "はパンくずで表示される文字を区切る部分に入る文字を指定する。>だとHTMLタグと認識され、表示されない可能性があるので、特殊文字を使用している。
今回は全画面にパンくずリストを表示させたいのでapplication.html.erbに記述する。

# app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
  ･･･
  </head>
  <body>
    <%= breadcrumbs separator: " &rsaquo; " %> 
    <%= yield %>
  </body>
</html>
end

次に設定ファイルで設定したcrumb名を各viewファイルに指定する。

# app/views/issues/index.html.erb

<%= breadcrumbs :issues %>

# app/views/issues/show.html.erb

<%= breadcrumbs :issue, @issue %>

詳細ページでは:issueのcrumbを使用している。
ここで、設定ファイルで設定したcrumb :issueではブロック変数を渡しており、ブロック変数には元となるインスタンスを渡さなければならない。
よって、詳細ページのviewファイルでは@issueのインスタンスを渡してある。

公式リファレンス

github.com