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

几乎所有的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>

刷新网页,展示如下:

在每个页面中,都要加入包含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>

展示的页面如下:

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

时间: 2024-07-28 17:03:04

RailsCase30 Pretty Page Title 动态变化的网页标题的相关文章

js判断网页标题包含某字符串则替换

js判断网页标题包含某字符串则替换,代码如下: var tit=document.title; if(tit.indexOf("afish")>0){ tit=tit.replace('http://t.qq.com/wb631992791','小鱼阁'); document.title=tit; js判断网页标题包含某字符串则替换

java抓取动态生成的网页

最近在做项目的时候有一个需求:从网页面抓取数据,要求是首先抓取整个网页的html源码(后期更新要使用到).刚开始一看这个简单,然后就稀里哗啦的敲起了代码(在这之前使用过Hadoop平台的分布式爬虫框架Nutch,使用起来是很方便,但是最后因为速度的原因放弃了,但生成的统计信息在后来的抓取中使用到了),很快holder.html和finance.html页面成功下载完成,然后解析完holder.html页面之后再解析finance.html,然后很沮丧的发现在这个页面中我需要的数据并没有在html

java抓取动态生成的网页--吐槽

最近在做项目的时候有一个需求:从网页面抓取数据,要求是首先抓取整个网页的html源码(后期更新要使用到).刚开始一看这个简单,然后就稀里哗啦的敲起了代码(在这之前使用过Hadoop平台的分布式爬虫框架Nutch,使用起来是很方便,但是最后因为速度的原因放弃了,但生成的统计信息在后来的抓取中使用到了),很快holder.html和finance.html页面成功下载完成,然后解析完holder.html页面之后再解析finance.html,然后很沮丧的发现在这个页面中我需要的数据并没有在html

怎样用java编程抓取动态生成的网页

最近在做项目的时候有一个需求:从网页面抓取数据,要求是首先抓取整个网页的html源码(后期更新要使用到).刚开始一看这个简单,然后就稀里哗啦的敲起了代码(在这之前使用过Hadoop平台的分布式爬虫框架Nutch,使用起来是很方便,但是最后因为速度的原因放弃了,但生成的统计信息在后来的抓取中使用到了),很快holder.html和finance.html页面成功下载完成,然后解析完holder.html页面之后再解析finance.html,然后很沮丧的发现在这个页面中我需要的数据并没有在html

js实现页面时间动态变化

利用函数嵌套和setTimeout函数实现时间动态变化 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.ge

Pop–实现任意iOS对象的任意属性的动态变化

简介 Pop 是一个可扩展的动画引擎,可用于实现任意iOS对象的任意属性的动态变化,支持一般动画,弹性动画和渐变动画三种类型. 项目主页: pop 最新示例: 点击下载 注意: 官方代码中,并不包含实例,而是用于编译的所有源代码,建议自行新建工程,并结合下文的代码片段查看效果. 入门 安装 通过CocoaPods安装 pod 'pop', '~> 1.0' 使用 在需要使用POP的地方,引入头文件: #import <pop/POP.h> 动画的开始,停止 与 更新 把动画添加到你想要拥

实时监测input控件value值动态变化的事件

目录 [1]input [2]propertychange [3]兼容处理 前面的话 HTML5为input控件新增了很多type属性,大大增加了input控件的应用场景.其中一个是type="range"的input控件,可以通过拖动游标改变value值,但并不是所有浏览器都可以实时显示,除了IE10+浏览器 说到改变value值的事件,首先想到的便是change事件,但change事件的触发条件是失去焦点并且value值改变.而游标拖动并没有失去焦点.所以,change事件并不能达

Android自定义View系列之动态变化的Button

我的微信公众号: 如果你喜欢我的文章,欢迎关注我的微信公众号. 今天给大家介绍的是一款可以动态变化的按钮,如矩形变为圆形.圆形变为矩形.矩形先变为进度条然后再变为圆形,我们还是先看看效果图吧. 第一个按钮由矩形变为圆角矩形. 第二个按钮由矩形变为圆形. 第三个按钮由矩形变为进度条,进度条结束后变为圆形. 在此声明一下,效果实现我这里并非原创,我也是在github上面看到此效果,然后阅读源码,觉得不错,就通过自己的理解把此效果自己也实现了一下. 此控件的特效主要是形状的动态变换,比如背景色,宽度和

C#PDA智能程序图片动态变化进度条设计及实现

前言:SmartProject 项目是C#桌面程序的精简版,很多属性和事件可能都没有设置进SDK中.在最近的PDA程序中,我没用使用进度条.为了防止用户乱点,最开始想使用windows提供的进度条,但是觉得又不适合,所以就试图用图片切换的方式来实现.  原理:开启线程切换图片实现显示(子线程不影响主线程而继续往下执行). 1.进度界面设计效果 2.界面切换效果 点击质检按钮后跳转(during the new thread running the UI will be changed): 等待业