パンくずリスト実装

はじめに

利用しているユーザーがどのページにアクセスしているのかを一目で分かりやすくするために、パンくず機能を実装したので、載せておこうと思います。
今回はgretel(リンクを設置したリストを表示するGem)を用いて、実装しました。

1.Gemの導入・ファイル作成

**1.Gemfileに gretel を記述し、bundle installする。

Gemfile

gem 'gretel'

ターミナル

% bundle install

2.パンくずリストの親子関係を記述するファイルを作成する。

ターミナル

% rails g gretel:install

すると、config / breadcrumbs.rb が作成される。

2.パンくずリスト親子関係記述

1 で作成した breadcrumbs.rb にコードを記述していく

config/breadcrumbs.rb

crumb "viewで呼び出す時のページ名" do
  link "リストの表示名", "アクセスするページのパス"
  parent :前のページ名
end

config/breadcrumbs.rb

crumb :root do
  link "トップページ", root_path
end

crumb :new_idea do
  link "アイデア新規投稿", new_idea_path
  parent :root
end

crumb :idea_show do |idea|
  link "アイデア詳細", idea_path(idea.id)
  parent :root
end

crumb :edit_idea do |idea|
  link "アイデア編集", edit_idea_path
  parent :idea_show,idea
end
# 中略

3.viewで呼び出す

2 で作成した親子関係をviewに呼び出す。

views/ideas/show.html.erb

<% breadcrumb :idea_show ,@idea%>    　　　　　<!--呼び出したいパンくずを記述-->
<%= breadcrumbs separator: " &rsaquo; " %>　　<!--パンくず間の区切りである「>」を示す-->

ひとまず実装完了！！！ あとはCSSで整えていく感じです。

　最後に

実装したパンくず機能はあらゆるサイトやアプリなどに用いられているので、今回の実装は勉強になりました。
活用できる機会があれば用いていきたいと思います。