码迷,mamicode.com
首页 > Web开发 > 详细

RailsCase30 Pretty Page Title 动态变化的网页标题

时间:2014-09-03 16:57:17      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:des   style   http   os   io   使用   ar   for   文件   

几乎所有的Rails网站都使用layout,但这回造成所有的网页都有同样的标题(在header中的title)。为每个网页设置独有的标题并不是件困难的事,解决方案见下文。

初步尝试

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’ %>
…

这是ASCIIcasts layout的部分代码。title元素已经被写死,故每个页面的title都是相同的。

下面为主页的代码,下一步将展示如何使主页拥有自己的title。

ruby

<h2>Recent Episodes</h2>
<ol class="episodeList">
<% @episodes.each do |episode| %>
  <%= render :partial=>’episode_item’, :locals => {:episode => episode} %>
<% end %>
</ol>

我们可利用content_for函数来实现此功能。在每个页面均添加如下代码:

ruby

<% content_for :title do %>Recent Episodes<% end %>

在layout中添加如下代码,用来显示title

ruby

<title>ASCIIcasts - <%= yield :title %></title>
刷新网页,展示如下:
bubuko.com,布布扣


在每个页面中,都要加入包含content_for的代码,这并不是优雅的处理方式。另一种处理方式是,在每个页面均设置一个实例变量,在layout中将其展示出来。我们将用<% @page_title = "Recent Episodes" %>来代替content_for,并更新layout中的内容:

ruby

<title>ASCIIcasts - <%= @page_title %></title>

上述方式仍不是一个好的方式。

使用Helper方法

最清爽的解决方案是在application_helper中创建名为title的方法,此方法接收一个要展示title内容的参数。

ruby

module ApplicationHelper
  def title(page_title)
    content_for(:title) { page_title }
  end
end
再此,继续使用content_for,使得layout可用yeild展示title。

layout中的代码如下:

ruby

<title>ASCIIcasts - <%= yield :title %></title>

每个页面的代码如下:
ruby

<% title "Recent Episodes" %>

设置默认值

可能不是每一个页面都要不同的title,此时设置默认值是可行的。按如下方式修改layout文件

ruby

<title>ASCIIcasts - <%= yield (:title) || "video.to_s" %></title>

若title在页面中没有被设置,将展示默认值。

一个小技巧

有一些可以精简代码的小技巧。若站点中,每个页面的开头都有h2元素,h2中显示的内容即为title,可将每个页面的重复代码转移至layout的顶部。涉及的layout大体如下:

ruby

<div class="main">
  <h2><%= yield(:title) %></h2>
  <%= yield %>
</div>
展示的页面如下:
bubuko.com,布布扣


原文地址:http://railscasts.com/episodes/30-pretty-page-title?view=asciicast



RailsCase30 Pretty Page Title 动态变化的网页标题

标签:des   style   http   os   io   使用   ar   for   文件   

原文地址:http://blog.csdn.net/dazhi_100/article/details/39027701

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!