Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
56
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

【Rails】gretelを使ってパンくずリストを作成

gretelの使い方

某ECサイトのコピーを作成する際に、パンくずリストの実装をしました。
いくつかgemがありましたが、コントローラを使用せずに設定ファイルとビューに記述するだけで実装できるgretelを選択しました。
あと名前が可愛い(←

パンくずリストとは

下記の画像をご覧下さい。

スクリーンショット 2019-06-24 23.47.13.png

よくサイトで見るやつですね!
今回はこれを実装していきます。

① gretelの導入

GitHub
https://github.com/lassebunk/gretel

公式
https://www.rubydoc.info/gems/gretel

② gemのinstall

gem "gretel"
$ bundle install

③ ファイルの設定

設定ファイルを下記コマンドで作成

$ rails generate gretel:install

すると下記のファイルが生成されます。

config/breadcrumbs.rb
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`).


まずはマイページをパンくずリストに記載したいので、下記のように追記します。

config/breadcrumbs.rb
# ルート
crumb :root do
  link "トップページ", root_path
end

# マイページ
crumb :mypage do
  link "マイページ", mypage_users_path
end

・ :mypage ← 設定ファイルを呼び出します。
・ "マイページ" ← パンくずリストに表示される名称です。
・ mypage_users_path ← 呼び出し元のパスを指定します。

④ ビューの設定

mypage.html.haml
-# config/breadcrumbs.rbに定義したmypageを呼び出し
- breadcrumb :mypage
-# 下記を記述した箇所にパンくずリストが表示される。
= breadcrumbs pretext: "You are here:",separator: " › "

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

パンくずリストの表示は、一般的に全ページに表示できるlayouts/application.html.hamlに記載することが多いかと思いますが、今回は一部のページでのみ表示させたいのと、改修を容易にする為、下記のように部分テンプレート化しています。

layouts/_breadcrumbs.html.haml
.breadcrumbs
  = breadcrumbs pretext: "",separator: " › ", class: "breadcrumbs-list"



実際のリスト呼び出しと表示結果はこのようになっています。

mypage.html.haml
- breadcrumb :mypage
= render "layouts/breadcrumbs"

スクリーンショット 2019-06-25 0.49.29.png

⑤ 親の設定

config/breadcrumb.rbのcrumbとendの間にparentを設定することで親を設定することができます。
マイページを親に設定してプロフィールをリストに表示させましょう。

config/breadcrumbs.rb
# ルート
crumb :root do
  link "トップページ", root_path
end

# マイページ
crumb :mypage do
  link "マイページ", mypage_users_path
end

# プロフィール
crumb :profile do
  link "プロフィール", edit_user_path
  parent :mypage
end

すると以下のように表示されます。

スクリーンショット 2019-06-25 0.58.32.png


今回参考にさせていただいた記事
https://qiita.com/you8/items/d2d37a745060b79c112f
https://qiita.com/namitop/items/5bcb3b90e63af758a9b0
http://vdeep.net/rubyonrails-gretel
https://doruby.jp/users/kisuzuki/entries/gretel%E3%81%A7%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90

以上がgretelを使用したパンくずリストの実装となります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
56
Help us understand the problem. What are the problem?