6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

パンくずリスト実装

Last updated at Posted at 2019-08-09

#[初心者]パンくずリストの実装を行った。
忘れないためのメモとして、簡単にまとめる。

まず、どのように実装するといいのか調べた。

その結果、パンくずリストを実装するのに便利なgemが2つあることがわかった。

  1. breadcrumbs_on_rails

  2. gretel
                  の2つである。

それぞれの特徴として、

  • breadcrumbs_on_rails は、コントローラに記述が必要であり、カスタマイズがしやすい。

  • gretel は、コントローラに記述する必要がないため、シンプル。

今回、初の実装であるためシンプルで、コントローラに記述する必要のないgretelを使うことにした。

今回、行った手順

  1. GEMのインストール
  2. 設定ファイルを生成
  3. 設定ファイルを編集
  4. Viewにパンくずを表示させる記述

の以上である。

###1.GEMのインストール

Gemfileに以下を記述

Gemfile
gem 'gretel'
$ bundle install

###2.設定ファイルの生成

$ bundle exec rails generate gretel:install

これにより、config/breadcrumbs.rb が生成された。
###3. 設定ファイルを編集

config/breadcrumbs.rb
crumb :任意の名前 do
  link "表示するリンク名", リンク先のパス
  parent :親リンクを指定
end
config/breadcrumbs.rb
"例"
crumb :root do
  link "メルカリ", root_path
end

crumb :show_user do
  link "マイページ", user_path
  parent :root
end

のように記述した。
###4. Viewにパンくずを表示させる記述

app/views/layouts/application.html.erb
<%= breadcrumbs pretext: "先頭に挿入する文章を記述、いらない場合は削除する", separator: " &rsaquo; " %>

を表示したい場所に記述する。

&rsaquo; は、出力されると › になる。

そして、表示したいviewファイルに、対応した以下を記述するとパンくずリストが表示される。

<% breadcrumb :対応した名前 %>

#####追記:パンくずを特定のページのみで表示させたい場合、application.html.erbに記述してしまうとすべてのページで読み込まれてしまうため、表示したいviewファイル内で以下のように記述する。

<% breadcrumb :対応した名前 %>
<%= breadcrumbs pretext: "先頭に挿入する文章を記述、いらない場合は削除する", separator: " &rsaquo; " %>

よく使うなら、renderしてあげるとわかりやすいかも(2行目の記述を)

順番が違うと表示されないため、注意が必要

以上で、終わり
間違えていたらすみません。
何か追加で分かり次第追加していきたい。

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?