使用javascript动态构建html标题标记

Question

我正在开发的网站上有很多页面,其中每个页面都有自己的标题标签.在许多情况下,标题具有常量文本,例如:

主页| 第1节| 第1页
首页| 第1节| 第2页
首页| 第1节| 第3页等...

插入这些标题会在以后进行更难的更改,更不用说记住添加它们的麻烦了.我希望找到一种使用javascript动态生成每个页面标题的方法,该方法基于网站文件夹结构中页面的位置.

我目前使用的脚本对于面包屑做了类似的操作,但我不确定如何引用相同的脚本,或者为页面标题构建类似的脚本.面包屑脚本在这里:http://trcreative.us/dev/jmsracing/js/breadcrumbs.js

并且大多数情况下我正在完成我需要的标题,减去每个面包屑项目的链接.(我不希望它明显地为标题做到这一点).

请参阅此处应用的面包屑:http://trcreative.us/dev/jmsracing/races/pigman-long-and-olympic/

任何帮助,将不胜感激.谢谢

Answer 1

该document对象具有title可以显式设置的属性,如下所示:

document.title = "some_title_here";

Answer 2

假设您的网址如下,home/section/page.html您可以在任何页面的顶部使用此功能,如果这是您的意思,它将根据网址设置标题.

function setTitle(extra) {
  document.title = location.pathname.split('/').map(function(v) {
    return v.replace(/\.(html|php)/, '')
      .replace(/^\w/, function(a) { return a.toUpperCase(); });
  }).join(' | ') + (extra && ' | '+ extra);
}

使用此函数将生成如下标题:Home | Section | Page.如果你想为特定页面添加特定的东西,那么传递一个字符串作为extra参数,它将被添加到标题即.

// url: http://mypage.com/home/about/frogs    
setTitle('Frogs are awesome');
console.log(document.title); //=> Home | About | Frogs | Frogs are awesome