動的タイトル表示の実装

ヘルパーを使ってタイトルを動的に表示させる。

ここでいうタイトルとはブラウザのタブに表示される文字のこと↓
f:id:meo2:20210527015536p:plain

f:id:meo2:20210527020630p:plain

実装内容

今回はヘルパーを使い、以下の各ページごとに動的にタイトルを表示させる。
content_forを使い、「ページごとのタイトル名 | タイトル名」のように表示させる。
トップページは「タイトル名」のみ表示。

  • トップページ
  • ログインページ
  • ユーザー登録ページ
  • 掲示板作成ページ
  • 掲示板一覧ページ
  • 掲示板詳細ページ

実装手順

  • app/helpers/application_helper.rbにメソッドを作成する。
  • 各ページのviewファイルへ設定を読み込ませる。

ヘルパーの作成。

empty?メソッドを使い、真偽判定をする。
変数の値が""(文字列の場合)や値が空白の場合、真となる。 条件演算子(?:)
条件式 ? 真の時の値 : 偽の時の値で記述。
page_titleの引数に''を入れて例外が発生するのを防ぐ。

module ApplicationHelper
  def page_title(page_title = '')
    base_title = 'SAMPLE APP'
    page_title.empty? ? base_title : page_title + ' | ' + base_title
  end 
end

webサイト全体のviewへ適応する。

i18n翻訳ファイルの編集。

ja:
  defaults:
    login: 'ログイン'
    register: '登録'
    title: 'ユーザー登録'
    to_login_page: 'ログインページへ'
  user_sessions:
     new:
       Back: '戻る'
       title: 'ログイン'
       email: 'メールアドレス'
       password: 'パスワード'
       to_register_page: '登録ページへ'
  users:
     new:
       title: 'ユーザー登録'  
  boards:
     title: '掲示板作成'
     index: '掲示板一覧'

ヘルパーで作成したメソッドを読み込む。
yieldメソッド
ビューを挿入すべき場所を指定。

〜
<title><%= page_title(yield(:title)) %></title>

これでトップページにbase_titleが適応される。
f:id:meo2:20210527023505p:plain

各viewファイルに読み込ませていく

content_forメソッド
コンテンツを名前付きのyieldとしてレンダリング

<%= content_for(:title, t('.title')) %>
<%= content_for(:title, t('boards.title')) %>
<%= content_for(:title, t('boards.index')) %>

掲示板詳細画面は閲覧中の掲示板名を表示させる。

<% content_for(:title, @board.title) %>

と記述。