입문

Rails 응용 프로그램의 제목 부분에 빵 부스러기 목록이 추가되었습니다.잊지 않으려고 썼어요.
개발 환경
ruby 2.6.5
Rails 6.0.3.4

카탈로그

1.Gem 배포
2. 빵 부스러기 설정
3. CSS 설정

1.Gem 배포

gretel이라는 Gem을 사용합니다.다음 Gemfile을 추적한 후 터미널에서 bundle install을 실행하는 것을 잊지 않습니다.
공식 GitHub
Gemfile

gem "gretel"

2. 빵 부스러기 설정

breadcrumbs.rb 파일을 만듭니다.제작 방법은 다음과 같다. 터미널에서 명령을 실행한다.
단말

rails g gretel:install

이번에는 아래의 4층으로 빵 부스러기 목록을 구성한다.
홈페이지 > 청결 조언 > 등록 일람 > 청결소 등록
config/breadcrumbs.rb

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

crumb :clean_suggestions do #ページの名前
  link "掃除提案", clean_suggestions_path　#リンク名、リンク先ページ
  parent :root
end

crumb :suggestions do
  link "登録一覧", suggestions_path
  parent :clean_suggestions
end

crumb :new_suggestion do
  link "掃除箇所の登録", new_suggestion_path
  parent :suggestions
end

각 제목의 보기에 빵 부스러기 목록을 추가합니다.또한 "separator:"> "은 목록에">"를 삽입합니다.브라우저에 표시됩니다.
첫 페이지 제목.html.erb

<%= link_to "トップページ", root_path, class: :logo %>
<% breadcrumb :root %>

제안의 제목을 삭제하다.html.erb

<% breadcrumb :clean_suggestions  %>
<%= breadcrumbs separator: " > " , class: :logo %>

목록 제목을 등록합니다.html.erb

<% breadcrumb :suggestions  %>
<%= breadcrumbs separator: " > " , class: :logo %>

정리처 등록 머리글

<% breadcrumb :new_suggestion  %>
<%= breadcrumbs separator: " > " , class: :logo %>

3. CSS 설정

logo 클래스는 > 에 적용됩니다.현재 페이지의 일부분이current 클래스를 자동으로 분배했음을 나타냅니다.다음 설명에 따라 현재 페이지를 굵은 글자로 설정하고 커서를 맞추면 색이 바뀝니다.
header.css

.logo {
  margin-left: 3vw;
}

.logo a {
  margin-right: 0.5vw;
}

.current {
  font-weight: bold;
  margin-right: 1vw;
}

.logo:hover,.logo a:hover {
  color: Chocolate;
}

보다 크면 같음