Rails で breadcrumbs_on_rails を使ってパンくずリストを表示する

シェアする

Rails で作成している Web サイトにパンくずリストを表示したくなったのでやってみた。使ったのは breadcrumbs_on_rails というやつ。

コントローラとそのメソッドにパンくずリストとして表示したい文言を記述していくタイプの gem です。

Sponsored Links

breadcrumbs_on_rails のインストール

Gemfile に以下のように記述し、bundle install とかしましょう。

gem "breadcrumbs_on_rails"

breadcrumbs_on_rails の使い方

コントローラにパンくずとして表示したい文言と URL を指定、ビューの HTML で表示したい箇所を指定するだけです。

コントローラには以下のように指定します。

class MyController
  add_breadcrumb AppName::Application::config::title, :root_path
  add_breadcrumb "hoge", :hoge_path

  def index
    add_breadcrumb "index", index_path
  end

  def fuga
    # URL を指定しなければリンクにならない
    add_breadcrumb "fuga"
  end
end

ビューの HTML には以下のように指定する。

<%= render_breadcrumbs %>

デフォルトでは以下のような見た目及び HTML を生成する。

breadcrumbs-on-rails

breadcrumbs-on-rails-html

区切り文字を指定する場合には以下のように指定する。

<%= render_breadcrumbs :separator => ' / ' %>

タグを指定するには以下のように指定する

<ol class="breadcrumb">
<%= render_breadcrumbs :tag => :li, :separator => "" %>
</ol>

bootstrap 及び microdata を使用したパンくずリストの HTML を生成する

僕が今開発している Web サイトは HTML に Bootstrap を使用している為、そのデザインを適用したい。ついでにパンくずリストを出力するなら microdata を利用したマークアップを行いたい。

breadcrumbs_on_rails であれば Custom Builder を利用する事で対応できる。Custom Builder の使い方は以下のブログ記事に記述があった。同じようにやればできるはず。

lib/custom_breadcrumbs_builder.rb を作成、以下のように記述する。

class CustomBreadcrumbsBuilder < BreadcrumbsOnRails::Breadcrumbs::Builder
  def render
    @context.render "/shared/breadcrumbs", elements: @elements
  end
end

次に、app/views/shared/_breadcrumbs.html.erb を作成、以下のように記述する。

<% if elements.present? and elements.length > 1 %>
    <ul class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <% elements[0..-2].each do |element| %>
        <li>
        <% 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><span itemprop="title"><%= elements.last.name %></span></li>
    </ul>
<% end %>

microdata の利用とパンくずリストを表示しない条件を追加した為に、参考にした上記ブログ記事とは若干異なっている。

最後に、パンくずリストを出力する際の記述を以下のように変更する。

<%= render_breadcrumbs builder: ::CustomBreadcrumbsBuilder %>

こうする事で Bootstrap と microdata に対応したパンくずリストを生成する事ができる。

breadcrumbs-on-rails-bootstrap

Google Developers にある Structured Data Testing Tool で生成された HTML が正しいのかを確認できる。

breadcrumbs-on-rails-check-structure

ばっちしですね。

Sponsored Link

シェアする

フォローする

コメント

  1. […] Rails で breadcrumbs_on_rails を使ってパンくずリストを表示する […]