はじめに

　今回はパンくずリストを作成するgretelというgemについて紹介します。

パンくずリストとは？

こちらの記事がわかりやすかったので載せておきます。

gemの導入

gem 'gretel'

$ bundle install

設定ファイルの生成

設定ファイルを生成するコマンドを入力します。

$ bundle exec rails generate gretel:install

このコマンドで、config/breadcrumbsが生成されました。

crumb :root do
  link "Home", root_path
end

# crumb :projects do
#   link "Projects", projects_path
# end

# crumb :project do |project|
#   link project.name, project_path(project)
#   parent :projects
# end

# crumb :project_issues do |project|
#   link "Issues", project_issues_path(project)
#   parent :project, project
# end

# crumb :issue do |issue|
#   link issue.title, issue_path(issue)
#   parent :project_issues, issue.project
# end

# If you want to split your breadcrumbs configuration over multiple files, you
# can create a folder named `config/breadcrumbs` and put your configuration
# files there. All *.rb files (e.g. `frontend.rb` or `products.rb`) in that
# folder are loaded and reloaded automatically when you change them, just like
# this file (`config/breadcrumbs.rb`).

こちらを編集していきます。

設定ファイルの編集

今回は一例として、HOME　＞　ユーザー一覧　＞　ユーザー詳細ページの設定を示していきます。

crumb :root do
  link 'Home', root_path
end

crumb :users do
  link 'ユーザー一覧', users_path
end

crumb :user do |user|
  link "#{user.name}", user_path(user)
  parent :users
end

crumb :root do内に設定した項目は、パンクズリストのルートに表示されます。

parentでは、そのページの上の階層を指定することができます。

viewでの配置

<%= breadcrumbs pretext: "You are here: ",  separator: " &rsaquo; " %>

pretextには、パンくずリストの先頭に挿入する文章を記述。いらない場合は設定しなくてOKです。「separator」には、パンくずの区切り文字を指定。「›」は出力されると「›」になります。

ユーザー一覧

<% breadcrumb :users %>

ユーザー詳細

<% breadcrumb :users %>

bokuの学習記録

【Rails】gem gretel（パンくずリスト）について