What is the best way to create a custom title for pages in a Rails app without using a plug-in?
17 Answers
In your views do something like this:
<% content_for :title, "Title for specific page" %>
<!-- or -->
<h1><%= content_for(:title, "Title for specific page") %></h1>
The following goes in the layout file:
<head>
<title><%= yield(:title) %></title>
<!-- Additional header tags here -->
</head>
<body>
<!-- If all pages contain a headline tag, it's preferable to put that in the layout file too -->
<h1><%= yield(:title) %></h1>
</body>
It's also possible to encapsulate the content_for and yield(:title) statements in helper methods (as others have already suggested). However, in simple cases such as this one I like to put the necessary code directly into the specific views without custom helpers.
Best practice is to use content_for.
First, add a couple of helper methods (ie. stick in app/helpers/application_helper.rb):
def page_title(separator = " – ")
[content_for(:title), 'My Cool Site'].compact.join(separator)
end
def page_heading(title)
content_for(:title){ title }
content_tag(:h1, title)
end
Then in your layout view you can simply use:
<title><%= page_title %></title>
...and in the view itself:
<%= page_heading "Awesome" %>
This way has the advantage of allowing you to shuffle where you stick the h1 tag for your title, and keeps your controller nice and free of pesky @title variables.
Without further details on the use-case or requirements that you're trying to satisfy, I can think of several alternatives:
1) Switch the title in one of your layout pages and consume a helper method stored in application_helper.rb
<title><%= custom_title %></title>
This approach will give you a unique title for each layout page.
2) Railscasts suggests using a partial to load what shows up between the HEAD tags
3) Use javascript/ajax calls to manipulate the DOM if you need to change the title after the load event.
Maybe you don't really want to change the content tagged by the title element. Perhaps you really need a breadcrumb of some sort, so that your users always know where they are with respect to your site's navigation hierarchy. While I've done fine with how the goldberg plugin, I'm sure there are other ways of pulling off the same functionality.
This simple approach sets a default title, but also let you override it whenever you please.
In app/views/layouts/application.html.erb:
<title><%= yield(:title) || 'my default title' %></title>
And to override that default, place this in any view you like
<% content_for :title, "some new title" %>
You can also set it in a before_filter in your controller.
# foo_controller.rb
class FooController < ApplicationController
before_filter :set_title
private
def set_title
@page_title = "Foo Page"
end
end
# application.html.erb
<h1><%= page_title %></h1>
You can then set conditions in the set_title method to set a different titles for different actions in the controller. It's nice to be able to see all the relevant page titles within your controller.
I like opsb's method, but this method works too.
<% provide(:title,"ttttttttttttttttttZ") %>
<html>
<head><title><%= yield(:title) %></title></head>
<body></body>
</html>
I wanted to ensure that translations was always provided for the current page.
This is what I came up with in app/views/layouts/application.html.erb:
<title>
<%= translate("#{controller_name}.#{action_name}.site_title", raise: true) %>
</title>
This will always look for a translation for the current view and raise an error if none is found.
If you instead wanted a default you could do:
<title>
<%= translate("#{controller_name}.#{action_name}.site_title",
default: translate(".site_title")) %>
</title>
There's already several good answers but here's how I eventually solved this in Rails 7 using a combination of several answers. This solution let's me:
- Provide the entire title for full control
e.g. "My awesome custom title" - Provide just a page title and it automatically appends the site title
e.g. "Items - My App" - Provide nothing and just the site title is displayed
e.g. "My App" - Localise all of the above
Set up
Localisation
# config/locales/en.yml
en:
layouts:
application:
site_title: "My App"
Logic in template
# app/views/layouts/application.html.erb
<title>
<%= yield(:title).presence ||
[yield(:page_title).presence, t(".site_title")].compact.join(" - ") %>
</title>
Logic in helper
Note the switch from yield to content_for
# app/views/layouts/application.html.erb
<title><%= show_title %></title>
# app/helpers/application_helper.rb
module ApplicationHelper
def show_title
content_for(:title).presence ||
[content_for(:page_title).presence, t(".site_title")].compact.join(" - ")
end
end
Usage
Fully custom title
# app/views/static_pages/welcome.html.erb
<% content_for :title, "My awesome custom title" %>
# or localised...
# <% content_for :title, t(".custom_title") %>
# Outputs:
# <title>My awesome custom title</title>
Page title (with site automatically appended)
# app/views/products/index.html.erb
<% content_for :page_title, "Items" %>
# or localised...
# <% content_for :page_title, t("Products.model_name.human") %>
# Outputs:
# <title>Items - My App</title>
Default page title
# No "content_for" specified
# Outputs:
# <title>My App</title>
Notes on the logic
.presenceis needed to turn empty strings (likeyield(:title)might be) into nils- If
yield(:title).presenceis nil, the||tells Ruby to evaluate the other side of the expression - On the other side, we start with an array of the page title and the site title
.compactremoves nils so if the page title is blank we don't end up with " - My App"- `.join(" - ") joins the items separated by a hyphen if there's more than one, returns the only item unmodified if there's only one and returns an empty string if the array is empty
I would like to add my pretty simple variant.
In the ApplicationController define this method:
def get_title
@action_title_name || case controller_name
when 'djs'
'Djs'
when 'photos'
'Photos'
when 'events'
'Various events'
when 'static'
'Info'
when 'club'
'My club'
when 'news'
'News'
when 'welcome'
'Welcome!'
else
'Other'
end
end
After that you can call get_title from your layout's title tag. You can define more specific title for your page by defining @action_title_name variable in your actions.
Related