forked from eifion/asciicasts.com-translations
/
en.html
executable file
·69 lines (61 loc) · 5.29 KB
/
en.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<p>Nearly all Rails applications use layouts and, because of this, there’s a tendency for each page of an application to have the same title (by title we mean the bit between the <code><title></code> tags in the head section). Giving each page its own title isn’t difficult though, and we’ll show you how to do that in this episode.</p>
<h3>A First Try</h3>
<pre class="ruby">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ASCIIcasts</title>
<%= stylesheet_link_tag ’asciicasts’ %>
…
</pre>
<p class="title">The first part of the ASCIIcasts layout page.</p>
<p>The code above shows the first few lines of the layout file for the ASCIIcasts site. The title element is hard-coded, so will be the same for each page. Let’s take a look at the template for the home page as we’ll be altering it to give the page its own title.</p>
<pre class="ruby">
<h2>Recent Episodes</h2>
<ol class="episodeList">
<% @episodes.each do |episode| %>
<%= render :partial=>’episode_item’, :locals => {:episode => episode} %>
<% end %>
</ol></pre>
<p class="title">The view template for the home page.</p>
<p>We showed back in <a href="/episodes/8-layouts-and-content-for">episode 8</a> how you could use <code>content_for</code> to change the content of a layout from within a template. Let’s try using that technique to alter our page titles. At the top of the template above we’ll put the following line.</p>
<pre class="ruby"><% content_for :title do %>Recent Episodes<% end %></pre>
<p>So that the content of the <code>content_for</code> block is shown in the layout we’ll alter the title element of our layout file.</p>
<pre class="ruby"><title>ASCIIcasts - <%= yield :title %></title></pre>
<p>When we refresh our page we can see that the title has been passed from the template into the layout.</p>
<img src="/system/photos/43/original/E030I01.png" width="945" height="290" alt="The page showing its own title.">
<p class="title">The page’s title has now changed.</p>
<p>Using <code>content_for</code> on each page isn’t the most elegant way to do this, especially as we’ll have to put a <code>content_for</code> block on each page in the site. An alternative way is to set an instance variable in each page and to display its value in the layout file. We’ll replace the <code>content_for</code> line in the template with <code><% @page_title = "Recent Episodes" %></code> and update the layout so that it shows the contents of the <code>@page_title</code> variable.</p>
<pre class="ruby">
<title>ASCIIcasts - <%= @page_title %></title>
</pre>
<p>This works too, but there is a better way.</p>
<h3>Using a Helper Method</h3>
<p>The cleanest solution is to create a method on the <code>application_helper</code> file called <code>title</code>, which takes a parameter containing the text we want to show.</p>
<pre class="ruby">
module ApplicationHelper
def title(page_title)
content_for(:title) { page_title }
end
end
</pre>
<p>As we’re using <code>content_for</code> again, we’ll have to change the layout back so that we’re using <code>yield</code> to display the title.</p>
<pre class="ruby"><title>ASCIIcasts - <%= yield :title %></title></pre>
<p>We can now set the title by calling the title method on each page.</p>
<pre class="ruby"><% title "Recent Episodes" %></pre>
<h3>Setting a Default</h3>
<p>We might not want to set a different title for every page on our site so it would be good to have a default value to fall back to. We’ll only have to make one small change to our layout file to do this.</p>
<pre class="ruby"><title>ASCIIcasts - <%= yield (:title) || "video.to_s" %></title></pre>
<p>Now, if the title is not set in a particular page, the default value will be shown instead.</p>
<h3>An Extra Trick</h3>
<p>There is one more trick we can use to cut out some of the repetition in our application. Each page on our site has an <code>h2</code> element at the top that contains the same text as the page title. To remove this duplication we could remove it from each of our templates and place it at the top of the layout page instead. The relevant part of our layout is now like this.</p>
<pre class="ruby">
<div class="main">
<h2><%= yield(:title) %></h2>
<%= yield %>
</div></pre>
<p>We can now remove all of the <code>h2</code> elements from each page as they’re handled by the layout.</p>
<p>Our site now has much more relevant page titles which will give users who find pages from your site in search engine results a better idea what your site is about.</p>
<img src="/system/photos/44/original/E030I02.png" width="895" height="279" alt="The episode’s title in the browser’s title bar.">
<p style="font-style:italic;">The ASCIIcasts site had a static title for all of its pages until this episode was written. I updated the site as I was writing this episode.</p>