【Rails】 페이지마다 타이틀의 표시를 바꾸는 설정

소개



title 태그의 제목을 페이지(view)마다 다른 내용을 표시하는 방법입니다.
아래 그림과 같이 제목에 "상품명 - Store"를 만들 수 있습니다.



Qiita 첫 투고 때문에, 알기 어려운 점이나 실수가 있으면 지적을 부탁드리겠습니다.

도달점



다음 4점 달성
productsshow 페이지의 타이틀에 상품명을 표시
"상품명 - Store"

categoriesshow 페이지 타이틀에, 카테고리명을 표시
"카테고리명 - Store"

・다른 페이지는 고정의 타이틀을 붙인다
"Store"

rspec 로 테스트를 녹색으로 한다

흐름



① application.html.erb에 타이틀의 공통화
② application_helper.rb를 작성해, 타이틀의 내용을 기술
③ "shared/_page_title.html.erb"(partial) 만들기
④ 각 show 페이지에 _page_title.html.erb를 렌더링
⑤rspec에서 helper 테스트

① application.html.erb에 타이틀의 공통화



application.html.erb의 head 태그 안에
<%= full_title(yield(:title)) %> 라고 기술합니다.

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
  </head>
  <body>
 # 省略


② application_helper.rb에 타이틀의 내용을 기술



app/helpers/application_helper.rb
module ApplicationHelper
  BASE_TITLE = "Store".freeze
  def full_title(page_title)
    if page_title.blank?
      BASE_TITLE
    else
      "#{page_title} - #{BASE_TITLE}"
    end
  end
end
BASE_TITLE 는, 정수이므로 대문자로 해, 파괴되지 않도록 freeze 메소드를 사용합니다.
함수내의 인수인 page_title 가 하늘의 경우와 nil 의 경우의 2 개를 고려하기 위해, blank 메소드로 확인합니다.
고려하는 이유로서, 함수는 다양한 경우를 상정하기 때문에, 함수를 호출한 측에서 에러를 판정하는 것보다 함수내에서 고려하는 편이 일괄로 실시할 수 있어 편하기 때문.

③ _page_title.html.erb 만들기



각 뷰에서 사용하기 위해 공유 폴더를 만들고 _page_title.html.erb를 만듭니다.

app/views/shared/_page_title.html.erb
<% provide(:title, page_title) %>
 <div class="page-title">
  <h2><%= page_title %></h2>
 </div>
# 省略

view내에 타이틀문과 같은 내용의 기술이 필요하다면, <%= page_title %> 라고 기술

④ 각 show 페이지에 _page_title.html.erb를 렌더링



/app/views/products/show.html.erb
<%= render partial: 'shared/page_title', locals: { page_title: @product.name } %>
# 省略

제목에 product-name-Store가 표시됩니다.

/app/views/products/show.html.erb
<%= render partial: 'shared/page_title', locals: { page_title: @category.name } %>
# 省略

마찬가지로 제목에 category-Store라는 이름이 표시됩니다.

⑤ rspec에서 helper 테스트


$ rails g rspec:helper application

Helper spec을 작성합니다.
  

spec/helper/application_helper_spec.rb
require 'rails_helper'

RSpec.describe ApplicationHelper do
  describe "#full_title(page_title)" do
    subject { full_title(page_title) }

    context "page_titleが空白の場合" do
      let(:page_title) { "" }

      it { is_expected.to eq("Store") }
    end

    context "page_titleがnilの場合" do
      let(:page_title) { nil }

      it { is_expected.to eq("Store") }
    end

    context "page_titleが存在する場合" do
      let(:page_title) { "sample" }

      it { is_expected.to eq("sample - Store") }
    end
  end
end

앞에서 설명한 것처럼 인수가 공백과 nil 인 경우를 고려하여 테스트합니다.

참고 기사



Qiita에서 좋은 기사를 쓰는 기술
Qiita (28) 이미지의 크기 조정
Markdown 기법 샘플 모음

좋은 웹페이지 즐겨찾기