`
peryt
  • 浏览: 54394 次
  • 来自: ...
最近访客 更多访客>>
社区版块
存档分类
最新评论
  • waiting: 既然都指定了dataType为'script'那就不必特别在b ...
    jQuery

如何为不同页面设置不同的title

阅读更多
<title>ABCD</title>
这部分代码一般放在layout file中。其结果是所有的页面都使用相同的title, 这样不利于别人检索到你的网页。那么如何在不同的页面显示不同的title呢?

一.
我们先来看第一种方法,就是上一篇文章介绍的content_for 方法,
<% content_for :title do %>Recent Episodes<% end %> 
然后在layout中:
<title>ASCIIcasts - <%= yield :title %></title> 

但是这种做法不好的地方在于,每个页面都要有content_for 这个block才行。

二.
第二种方法就是使用实例变量,在controller中定义的实例变量是可以在template中自由使用的,当然,此处我们的实例变量可以直接在template中定义。
<% @page_title = "Recent Episodes" %>
然后在layout中:
<title>ASCIIcasts - <%= @page_title %></title> 

三.
还有更好的方法,既然我们每个页面都会用到,那么不妨将content_for 做成一个方法,放在application_helpr.rb 中,
   1. module ApplicationHelper 
   2.   def title(page_title) 
   3.     content_for(:title) { page_title } 
   4.   end 
   5. end 

这样,在每个template中,只需要调用这个方法,  
1. <% title "Recent Episodes" %> 
然后在layout中:
<title>ASCIIcasts - <%= yield :title %></title> 
就可以了。
当然,如果你想有一个默认的title,那么可以使用:
<title>ASCIIcasts - <%= yield :title || “video.to_s”%></title>
这样,如果页面没有定义title,就会使用默认的title了

如果每一页都要在网页上显示出这个title来,那么显然显示title的html代码也是放在layout中最好了。

   1. <div class="main"> 
   2.   <h2><%= yield(:title) %></h2> 
   3.   <%= yield %> 
   4. </div> 
分享到:
评论

相关推荐

    React项目动态设置title标题的方法示例

    在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的。那么怎么让title随着路由的切换动态变化呢? 1.在定义路由时增加title属性。 { path: /...

    nuxt 服务器渲染动态设置 title和seo关键字的操作

    补充知识:vue 每个页面动态切换title keywords description (seo的设置) 最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description !!!在这里先添加一步: html文件添加 &lt;meta data-n-...

    title滚动页面title滚动

    标题滚动和页面标题滚动是网页设计中常见的动态效果,它们能为用户带来更生动、更具吸引力的浏览体验。本文将详细探讨这两个概念及其在实际应用中的实现方式。 首先,我们来理解什么是“title滚动”。在网页中,...

    浅谈vue2 单页面如何设置网页title

    这使得传统的每个页面设置title标签的做法变得不可行。 为什么不能使用传统的title设置方法? 传统的title设置方法是通过在每个页面的head部分添加title标签来实现的。但是在单页面应用程序中,这种方法不可行。...

    一个jsp页面中多个提交按钮提交不同的页面.zip

    要实现多个提交按钮,我们需要为每个按钮设置不同的name属性,以便在服务器端区分它们。同时,我们可以使用表单(form)元素来封装这些按钮,每个表单可以指定不同的action属性,该属性定义了当表单被提交时应调用的...

    页面alt,title自检工具

    "页面alt,title自检工具"是一种专门用于检查网页中`alt` 和 `title` 属性是否正确设置的实用工具。通过这个工具,网页开发者和SEO专家可以确保他们的网站符合无障碍访问标准,并提高搜索引擎的可读性。 1. **无...

    自定义title

    3. **大小**:标题的字号可以根据其在整个界面中的重要性进行调整,重要的标题可以设置为大号字体,次要的信息则使用小号字体。 4. **对齐方式**:标题可以是居中、左对齐或右对齐,这取决于内容的布局和设计美学。...

    wordpress插件SEO Title Tag(个性化浏览器title)

    2. **模板系统**:用户可以创建全局模板,然后为特定类型的内容(如页面、文章、分类、标签)设置不同的Title格式。 3. **自定义元描述**:除了Title Tag,插件可能还提供元描述(Meta Description)的自定义,这是...

    HTML5中对title属性的定义与规定

    - **超链接**: `&lt;a&gt;`标签可以使用`title`属性来提供目标页面的简短描述,这对于预览链接的目的地非常有用。 - **图像**: `&lt;img&gt;`标签可以通过`title`属性来补充`alt`属性中缺失的信息,特别是在`alt`无法充分描述...

    设置页面缓存Cache

    ### 设置页面缓存Cache #### 知识点一:页面缓存的概念与作用 页面缓存(Page Caching)是Web开发中一种重要的优化技术,主要用于提高网站性能和响应速度。通过将页面的HTML输出存储在服务器端的缓存中,当用户...

    使用vue-router设置每个页面的title方法

    使用vue-router设置每个页面的title方法 在 Vue 项目中,如何设置每个页面的 title 是一个非常重要的问题。使用 vue-router,可以轻松地实现设置每个页面的 title。下面我们将详细介绍如何使用 vue-router 设置每个...

    优雅实现微信小程序动态tabBar,根据不同用户角色显示不同底部导航-更新版(支持自由组合总数超过5个tabBar菜单)

    7、注意你的不同权限页面里面对应的高亮下标设置,及第一个页面的跳转路径。 适合人群: 1、具备一定编程基础,熟悉小程序开发者。 能学到什么: 1、使用自定义组件,完全接管 tabBar 的渲染。

    FrameWork title布局

    在实际应用中,我们还可以结合Android的Fragment来进一步优化布局管理,使得Title布局能在不同页面间灵活切换,同时保持界面风格的一致性。此外,考虑使用主题(Theme)和样式(Style)来全局控制Title的颜色、字体...

    vue中动态设置meta标签和title标签的方法

    - title标签同样需要根据路由的变化而变化,以确保用户在不同页面上看到正确的页面标题。 ### 4. 结论 通过上述介绍,可以看出在Vue项目中动态设置meta标签和title标签是可行的,并且可以通过在路由配置中添加meta...

    vue-router动态设置页面title的实例讲解

    然而,直接使用document.title来设置标题在iOS设备上的Safari浏览器中不起作用,因为Safari在加载页面时只设置一次标题,之后的更改不会生效。 为了解决这个问题,可以采用动态加载一个隐藏的iframe的方法,并在...

    vue动态设置页面title的方法实例

    在Vue应用中,有时我们需要根据不同的页面内容动态地改变浏览器的标题(`document.title`),以提供更好的用户体验和更清晰的多标签页管理。本文将详细介绍在Vue项目中实现动态设置页面标题的四种方法。 1. **...

    uni-app自定义导航栏title-custom.zip

    以上代码将当前页面的导航栏标题设置为“自定义标题”,字体颜色为白色,背景颜色为深灰色,并添加了顶部边框。当然,这些值可以根据你的设计需求进行调整。 然而,有时我们可能需要更复杂的自定义,例如动态改变...

    Android给每个页面特上不同的标签

    综上所述,Android开发者可以通过多种方式为每个页面设置不同的标签,以增强应用的用户体验。同时,结合图片的使用,可以进一步提升页面的视觉效果和识别度。在实际开发中,应根据项目的具体需求和设计规范灵活运用...

    Struts中Title标签实例

    2. 内容复用:可以为不同页面定义通用的标题模板,然后在各个页面中根据需要覆盖。 3. SEO友好:能够方便地调整每个页面的标题,有助于搜索引擎优化。 综上所述,Struts中的`&lt;title&gt;`标签在构建Web应用程序时起着...

Global site tag (gtag.js) - Google Analytics