foobar

note to self

Ruby on Railsでページごとにページタイトルを変える方法

こんにちは。本日はRailsでページごとにタイトルを動的に変える方法です。

webサイトをつくっているとページごとにブラウザに表示されるタイトルを変えたいと思うときがあると思います。

結構簡単にできるので順番に説明していきたいと思います。

application.html.erbの編集

rails newをターミナルで打つとたくさんのファイルが生成されますが、一番ベーシックなレイアウトテンプレートであるapplication.html.erb

このファイル内にあるheadタグのtitleタグの部分を次のように編集します。

<!-- app/views/layouts/application.html.erb -->

<!DOCTYPE html>
<html>
<head>
  <title><%= page_title %></title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
  <%= yield %>
</body>
</html>

titleタグの部分を <%= page_title %> と変更しました。

これで第一段階終了です。

application_helper.rbにヘルパーメソッドを書く

タイトルを動的に変えるにはRailsヘルパーにページタイトルのメソッドを書きます。ページのタイトルはすべてのページに反映させたいので共通ヘルパーのapplication_helperに定義していきます。

# app/helpers/application.helper.rb 

module ApplicationHelper
  def page_title
    title = "Demo" #ここにデフォルトの名前を入れてください。
    title = @page_title + " | " + title if @page_title
    title
  end
end

この段階では以下のような状態になっていて、まだページタイトルは反映されていません。

f:id:otsukasatoshi:20191024152907p:plain  

それぞれのviewに@page_titleを定義する

helperに定義できたので、次は実際にタイトルを反映させるためにそれぞれのviewに@page_titleを定義していきます。

今回はtop.html.erbを作成してブラウザでアクセスした時に「トップ | Demo」と表示できるようにしてみましょう。

<!-- app/views/home/top.html.erb -->

<!--ここにページごとのタイトルを定義-->
<% @page_title = "トップ" %> 

ブラウザをリロードすると

f:id:otsukasatoshi:20191024153139p:plain

きちんと動的にタイトルが変わっていますね。

左側がページごとに動的に変化して、右側がヘルパーで定義したデフォルトのタイトルです。

今回は以上です。