Help us understand the problem. What is going on with this article?

railsでgretelを使ってパンくずリストを作った

More than 1 year has passed since last update.

目的

railsのサイトでgretelを使ってパンくずリストを作成する。SEO対策も兼ねているので下記仕様。

  • 構造化データ
  • タグに階層構造をつける
  • 階層にリンクをつけてタグの一覧に飛べるようにする
  • 親がないときとある時で階層が違う

gretel導入

https://github.com/lassebunk/gretel

document

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

install

gem "gretel"
$ bundle install

fileの設定

設定fileを下記コマンドで作成

$ rails generate gretel:install
config/breadcrumb.rb
# Root crumb
crumb :root do
  link "Home", root_path
end

# Issue list
crumb :issues do
  link "All issues", issues_path
end

# Issue
crumb :issue do |issue|
  link issue.title, issue
  parent :issues
end

viewに設置

<% breadcrumb :issue, @issue %>

上記で各ページでどこまでのパンくずを出すのか設定する。実際にパンくずが出るのは下記を記述した箇所

<%= breadcrumbs pretext: "You are here: ", separator: " &rsaquo; " %>
  • pretext→パンくずリストの前のテキスト
  • separator→パンくずの間の区切り

親の設定

config/breadcrumb.rbのcrumbとendの間にparentを設定することで親を設定することができる。

config/breadcrumb.rb
crumb :root do
  link "Home", root_path
end

# user#index
crumb :users do
  link "Users", users_path
  parent :root
end

上記でparentにrootを設定。

リンクをつける

リンクの設定

リンクはconfig/breadcrumb.rbのcrumbとendの間にlinkを下記のように設定する。

config/breadcrumb.rb
crumb :root do
  link "Home", root_path
end

# user#index
crumb :users do
  link "Users", users_path
  parent :root
end

構造化データ

semantic: trueでgretelで構造化データを作ることができる。gretelの場合data-vocabularyで設定される。

root>親カテゴリ>記事名で親カテゴリページでタグを出したい場合

breadcrumbs.rb
crumb :root do
  link "Home", root_path
end

crumb :tag do |tag|
  if current_page?(:controller => 'post', :action => 'show')
    show_post_tag_id = TagMap.find_by(post_id: params[:id]).tag_id
    show_post_tag = Tag.find_by(id: show_post_tag_id)
    link show_post_tag.name
  else
    tag_page = Tag.find_by(id: params[:id])
    link tag_page.name
  end
  parent :root
end

crumb :show_title do |show_title|
  show_title = Post.find_by(id: params[:id])
  link show_title.title
  parent :tag
end
you8
普段はSNSのプロダクトマネージャーをしています。広告とかチーム運営とかについてはここ( http://you88.space/ )。日曜大工的に個人開発しています。( https://twitter.com/you8802 )作ったランチ募集サービス https://www.tea-pot.net/
https://you88.space/
nana-music
音楽SNSサービス「nana」の開発・運営を行っているスタートアップ
https://nana-music.co.jp
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