利用 Javascript 为 Blogger 页面加上标题

在使用了 Blogger 系统的 Blog 中，存档页面和 Label 页面都没有一个醒目的标题，看起来跟首页没有什么两样，这对于阅读者来说多少有些不友好。如果能够给每个页面加一个标题，例如“存档：2006/11 - 2006/12”或者“TAG：Javascript”，那么阅读者就会减少很多迷惘（本站的演示:Label页面、存档页面）。这个功能只需了解一下 Javascript 中的 location 对象就不难实现。

以URL

http://www.mixfog.com/blog/index.htm?action=view#comment

为例，看一下 location 对象的几个常用属性：

Javascrit location Object

属性			值				备注
hash		comment			即我们平时所说的“锚点”链接
host		www.mixfog.com	主机名
hostname	mixfog.com		与host相同，有时会省略www
href		http://www.mixfog.com/blog/index.htm	完整的URL
pathname	/blog/index.htm	URL中hosthost之后的内容
port						端口信息，通常都是空的
pritocol	http:			协议
search		?action=view	查询字符串

看了这个表之后，基本上能够总结出一个解决方案了。Blogger中生成的Label页面的URL都是

http://Blog地址/labels/labelName.htm

用 Javascript 很容易就可以得到这个 labelName。

同样，如果设置了存档文件的目录为“archives”，文件名为 archive.htm 的话，一个存档页面的 URL 应该类似

http://Blog地址/archives/2006_11_01_archive.htm

也会很容易的获得“2006_11_01”这个字段作为存档页面的标题。但是有一个更好的途径，利用存档页面的 <title>，Blogger 生成的存档页面的 <title>大多是“网站名称:存档时间”，这个存档时间的格式是由个人在后台设置的，例如本站为“2006/11 - 2006/12”。

那么看一下具体的代码：

function getPageTitle() {
	var pathName = location.pathname; //获得页面路径
	if (pathName.indexOf('/labels/')!=-1) { //判断是否为Label页面 
		var fileName = pathName.split('/labels/');
		var tagName = fileName[1].split('.');
		document.write ('<h1>TAG: '+ tagName[0] +'</h1>');
	} else if (pathName.indexOf('/archives/')!=-1) { //判断是否为存档页面 
		var pageTitle = document.title.split(':');
		document.write ('<h1>存档: '+ pageTitle[1] +'</h1>');
	}
}

代码很简单，基本上没什么好说的，然后在模板中调用 getPageTitle 即可。由于只在 Label 页面和存档页面用到，所以 ItemPage 就完全不需要这段代码：

<MainOrArchivePage><script type="text/javascript"> getPageTitle(); </script><MainOrArchivePage>

把这段代码加在模板中希望出现页面标题的位置即可，本站的演示可参考“Label页面”、“存档页面”。有几个需要注意的地方：

• 存档的路径会因为个人设置的不同而不同，这不难解决。
• 本例中假设站点名称中不包含半角的冒号，因为存档页的时间和站点标题是用半角冒号来分割的，但即使包含，也不难解决。
• 第三个有点致命，不支持中文的 Label，因为 Blogger 对中文的 Label 进行的转码，例如“电影”，对应的 Label 页面地址可能是“55S15b2x.htm”，好在我的 Blog 中尽量少用中文的 Label 名称，所以这个问题就有待其他人士来解决吧。
• 补充一个，如果您的 Label 中含有空格，在 URL 中会自动转换为 20%，在获取的时候就需要转换回来，但是个人不建议在 Label 中使用空格，用一个连字符“-”也许更好。