gretel 사용법

모 EC 사이트의 복사본을 만들 때 빵 부스러기 목록을 구현했습니다.
몇 가지 gem이 있었지만 컨트롤러를 사용하지 않고 구성 파일과 뷰에 작성하는 것만으로 구현할 수있는 gretel을 선택했습니다.
그리고 이름이 귀엽다 (←

빵 부스러기 목록이란?

아래 이미지를 참조하십시오.



자주 사이트에서 보는 녀석이군요!
이번에는 이것을 구현할 것입니다.

① gretel 도입

GitHub
htps : // 기주 b. 코 m / ㄱ세분 k / g

공식
htps //w w. 하는 by c. 인후 / 게 ms / g L

② gem의 install

gem "gretel"

$ bundle install

③ 파일 설정

설정 파일을 아래 명령으로 작성

$ rails generate gretel:install

그러면 다음 파일이 생성됩니다.

config/breadcrumbs.rb

crumb :root do
  link "Home", root_path
end

# crumb :projects do
#   link "Projects", projects_path
# end

# crumb :project do |project|
#   link project.name, project_path(project)
#   parent :projects
# end

# crumb :project_issues do |project|
#   link "Issues", project_issues_path(project)
#   parent :project, project
# end

# crumb :issue do |issue|
#   link issue.title, issue_path(issue)
#   parent :project_issues, issue.project
# end

# If you want to split your breadcrumbs configuration over multiple files, you
# can create a folder named `config/breadcrumbs` and put your configuration
# files there. All *.rb files (e.g. `frontend.rb` or `products.rb`) in that
# folder are loaded and reloaded automatically when you change them, just like
# this file (`config/breadcrumbs.rb`).

우선은 마이 페이지를 빵 부스러기 리스트에 기재하고 싶으므로, 아래와 같이 추기합니다.

config/breadcrumbs.rb

# ルート
crumb :root do
  link "トップページ", root_path
end

# マイページ
crumb :mypage do
  link "マイページ", mypage_users_path
end

· :mypage ← 설정 파일을 호출합니다.
· "내 페이지"← 빵 부스러기 목록에 표시되는 이름입니다.
· mypage_users_path ← 호출자의 경로를 지정합니다.

④ 뷰 설정

mypage.html.haml

-# config/breadcrumbs.rbに定義したmypageを呼び出し
- breadcrumb :mypage
-# 下記を記述した箇所にパンくずリストが表示される。
= breadcrumbs pretext: "You are here:",separator: " › "

· pretext ← 빵 부스러기 리스트의 선두에 삽입하는 문장을 기술. 필요하지 않으면 설정하지 않아도 괜찮습니다.
・ separator ← 빵 부스러기의 구분자를 지정. 「&rsaquo」는 출력되면 「›」가 됩니다.

빵 부스러기 목록의 표시는 일반적으로 모든 페이지에 표시할 수 있는 layouts/application.html.haml에 기재하는 것이 많을까 생각합니다만, 이번은 일부 페이지에서만 표시시키고 싶은 것과 개수를 용이하게 하기 때문에, 아래와 같이 부분 템플릿화하고 있습니다.

layouts/_breadcrumbs.html.haml

.breadcrumbs
  = breadcrumbs pretext: "",separator: " › ", class: "breadcrumbs-list"

실제 목록 호출과 표시 결과는 다음과 같습니다.

mypage.html.haml

- breadcrumb :mypage
= render "layouts/breadcrumbs"

⑤ 부모 설정

config/breadcrumb.rb의 crumb과 end 사이에 parent를 설정하여 부모를 설정할 수 있습니다.
내 페이지를 부모로 설정하여 프로필을 목록에 표시합니다.

config/breadcrumbs.rb

# ルート
crumb :root do
  link "トップページ", root_path
end

# マイページ
crumb :mypage do
  link "マイページ", mypage_users_path
end

# プロフィール
crumb :profile do
  link "プロフィール", edit_user_path
  parent :mypage
end

그러면 다음과 같이 표시됩니다.



이번에 참고한 기사
htps : // m / 8 / ms / d2d37 745060b79c112f
htps : // m / nami와 p / ms / 5bcb3b90에 63에 f758에 9b0
htp : // v로 에 p. 네 t / 루병라이 ls-g
h tps : // 어서 오세요. jp/우세 rs/키스즈키/엔 t리에 s/g 되어 l%에 3% 81% 아 7%에 3% 83% 91%에 3% 83% B3% 81% 9아% 3% 83% 아% 3% 82% B9% 3% 83% 88% 3% 82% 92% 4% BD% 9C% 6% 88% 90

이상이 gretel을 사용한 빵 부스러기 목록의 구현이 됩니다.