読者です 読者をやめる 読者になる 読者になる

ちーくんのブログ

プログラミング備忘録

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

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

webサイトを創っているとページごとにブラウザに表示されるタイトルを変えたいと思うときがあると思います。
結構簡単にできるので順番に説明したいと思います。

バージョン

Ruby '2.2.1'
Rails '4.2.1'


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:chi_kun:20160330015607p:plain


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

helperに定義できたので次は実際にタイトルを反映させるためにそれぞれのviewに@page_titleを定義していきます。
今回はtop.html.erbを作成してブラウザでアクセスした時に「トップ | Demo」と表示できるようにしてみましょう。

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

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

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

f:id:chi_kun:20160330040243p:plain

きちんと動的にタイトルが変わりましたね。
左側がページごとに動的に変化、右側がデフォルトの名前です。



今回は以上です。