パンくずリストとは
超簡単に言うと、ページ遷移を視覚的に表示してくれるものです。
導入する目的としては主にSEO対策とUIの向上でしょうか。
その辺は「パンくずリスト」とかで調べると死ぬほど出てくるので、それを見ると良いと思います。
gretelというGem
Railsの場合、gretelというGemを導入することで、爆速でパンくずリストを作成できます。
gretelはリンクを設置したリストを画面に表示する機能を実装できます。
ということでいつも通り
gem "gretel"
Gemfileに記述して、いつも通りbundle install(DB作成後はサーバーの立ち上げ直しも)
rails g gretel:install
これでgretelをインストールします。
インストールしたらconfig/breadcrumbs.rbが自動で作成されます。
breadcrumbs.rbの記述
config/breadcrumbs.rb
#rootは自動で作成されている
crumb :root do
link "Home", root_path
end
#ここから追記する
crumb "現在のページ名（表示させるビューにもページ名記述）" do
link "パンくずリストでの表示名", "アクセスしたいページのパス"
parent :親要素のページ名（前のページ）
end
#例
crumb :tweets do
link "ツイート一覧", tweets_index_path
parent :root
end
crumb :contacts do
link "コンタクト", contacts_index_path
parent :tweets
end
これでパンくずリストの表示設定ができたので、あとはこれを各種ビューに表示させればOK
ビューへの追記
views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Breadcrumb</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
#追記
<%= breadcrumbs separator: " › " %>
#追記ここまで
<%= yield %>
</body>
</html>
separator: " ›”は、パンくず間の区切りである「>」を示します。
パンくずを表示したいViewに
<% breadcrumb :root %>
#rootのところはconfig/breadcrumbs.rbで作成した名前
これでパンくずリストは作成完了です。
めっちゃ簡単かつWEBアプリケーションとして必要な機能でもあるので、導入する時のコスパは高いですね。
個人的にはこういう簡単で、効果が高い機能は大好きです。