소개

화면 전환을 이해하기 쉽도록 gretel이라는 gem을 사용하여 빵 부스러기 기능을 구현했습니다.

목차

1. gretel 설치

2. 빵 부스러기 설정

3. 보기

1. gretel 설치

gretel이라는 gem을 사용하면 링크를 설치한 목록을 화면에 표시시키는 빵 부스러기를 구현할 수 있습니다.

gemfile

gem "gretel"

터미널

bundle install

2. 빵 부스러기 설정

빵 부스러기의 부모-자식 관계를 설정하는 파일을 만듭니다.

터미널

rails g gretel:install

예

config/breadcrumbs.rb

crumb "現在のページ名（表示させるビューにもページ名記述）" do
  link "パンくずリストでの表示名", "アクセスしたいページのパス"
  parent :親要素のページ名（前のページ）
end

config/breadcrumbs.rb

crumb :root do
  link "ホーム", root_path
end
crumb :posts do
  link "クチコミ一覧", posts_path
  parent :root
end

crumb :post_show do |post|
  link post.name, post_path(post)
  parent :posts
end

crumb :user do |user| 
  link user.nickname, user_path(user)
  parent :root
end

# 親カテゴリーのパンくず
crumb :parent_category do |category|
  category = Category.find(params[:id]).root
  link "#{category.name}", search_post_path(category)
  parent :root
end

# 子カテゴリーのパンくず
crumb :child_category do |category|
  category = Category.find(params[:id])
  # 表示しているページが子カテゴリーの一覧ページの場合
  if category.has_children?
    link "#{category.name}", search_post_path(category)
    parent :parent_category

  # 表示しているページが孫カテゴリーの一覧ページの場合
  else
    link "#{category.parent.name}", search_post_path(category.parent)
    parent :parent_category
  end
end

# 孫カテゴリーのパンくず
crumb :grandchild_category do |category|
  category = Category.find(params[:id])
  link "#{category.name}", search_post_path(category)
  parent :child_category
end

crumb :post_new do
  link "新しいクチコミ投稿", new_post_path
  parent :root
end

crumb :name_search do |search|
  if search == ""
    link "クチコミ検索結果", name_search_posts_path
  else
    link "「#{search}」のクチコミ検索結果", name_search_posts_path
  end
  parent :posts
end

카테고리의 빵 부스러기 목록은 상위 카테고리 > 하위 카테고리 > 손자 카테고리가 되도록 설정되어 있습니다.
하위 카테고리의 처리에 대해서는, 손자 카테고리의 페이지로부터 호출했을 경우(손자 카테고리를 선택했을 때)와, 아이 카테고리의 페이지로부터 호출했을 경우(자식 카테고리를 선택했을 때)의 2개의 조건으로 처리를 바꾸도록(듯이) 합니다.

3. 보기

이번에는 빵 부스러기를 표시시키고 싶은 곳에만 적응하고 싶었기 때문에 부분 템플릿을 만들었습니다.

app/views/shared/_breadcrumbs.html.erb

<div>
  <%= breadcrumbs separator: " &rsaquo; " %>
</div>

separator: "›"는 빵 부스러기 구분자인 ">"를 나타냅니다.

투고 일람의 index 파일만 올려 둡니다.

app/views/posts/index.html.erb

~略~
<% breadcrumb :posts %>
<%= render "shared/breadcrumbs" %>
~略~

breadcrumb :posts는 breadcrumbs.rb에 설정된 페이지 이름을 설명합니다.

참고 링크