railsアプリにパンくずリストを実装するGem ~breadcrumbs_on_rails~
最終目標
- railsアプリにカスタム構造のパンくずリストの設置
- viewはslimで実装
SEOにいいパンくずのタグ構造は「いろんなキュレーションサイトのパンくずリスト比較」(http://chmod.tech/?p=867) を参考にする.
すでにbreadcrumbs_on_railsでパンくずリストが実装できている前提で進める(controllerのadd_breadcrumbとかを省略してる)
lib/custom_breadcrumbs_builder.rb
lib/custom_breadcrumbs_builder.rb
class CustomBreadcrumbsBuilder < BreadcrumbsOnRails::Breadcrumbs::Builder
def render
@context.render "/article/breadcrumbs", elements: @elements
end
end
pathは次に追加するカスタムしたパンくずのviewがを指定(今回ならapp/views/article/_breadcrumbs.html.slim)
view(カスタムしたパンくずのタグ構造)
app/views/article/_breadcrumbs.html.slim
- if elements.present? and elements.length > 1
ul
- elements[0..-2].each do |element|
li [itemscope itemtype="http://data-vocabulary.org/Breadcrumb"]
- if element.path.present?
a href="#{element.path}" itemprop="url"
span itemprop="title"
= element.name
- else
span itemprop="title"
= element.name
li [itemscope itemtype="http://data-vocabulary.org/Breadcrumb"]
span itemprop="title"
= elements.last.name
erbなら下のようになる(動作未確認)
<% if elements.present? and elements.length > 1 %>
<ul itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<% elements[0..-2].each do |element| %>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<% if element.path.present? %>
<a itemprop="url" href="<%= element.path %>"><span itemprop="title"><%= element.name %></span></a>
<% else %>
<span itemprop="title"><%= element.name %></span>
<% end %>
</li>
<% end %>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title"><%= elements.last.name %></span>
</li>
</ul>
<% end %>
を追加
view(パンくず表示箇所)
表示する場所の呼び出しを変える
= render_breadcrumbs builder: ::CustomBreadcrumbsBuilder
erbなら
<%= render_breadcrumbs builder: ::CustomBreadcrumbsBuilder %>
libの読み込み（超重要！！！！！）
config/applecation.rb
config.autoload_paths += Dir[Rails.root.join('lib')]
を追加
これをしないとlibに追加したcustom_breadcrumbs_builder.rbを読み込んでくれなくてNO NAME ERRORになる.
まとめ
- libの読み込みを書かないといけないところでつまずいた.
- 表示できてる前提からのカスタムの仕方しか書かなかったので、時間があったらgemの追加から書きたい.
参考サイト
http://loumo.jp/wp/archive/20150711000024/
http://chmod.tech/?p=867
http://chmod.tech/?p=896
Author And Source
この問題について(railsアプリにパンくずリストを実装するGem ~breadcrumbs_on_rails~), 我々は、より多くの情報をここで見つけました https://qiita.com/fujitora/items/e309e443461b8474a6af著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .