2006年11月20日
巧用Javascript的location对象给Blog各页面加上标题
在使用了Blogger系统的Blog中，存档页面和Label（Beta）页面都没有一个醒目的标题，看起来跟首页没有什么两样，这对于阅读者来说多少有些不友好。如果能够给每个页面加一个标题，例如“存档：2006/11 - 2006/12”或者“TAG：Javascript”，那么阅读者就会减少很多迷惘（本站的演示:Label页面、存档页面）。这个功能只需了解一下Javascript中的location对象就不难实现。阅读全文...
以URL
http://www.mixfog.com/blog/index.htm?action=view#comment
为例，看一下location对象的几个常用属性：
| 属性 | 值 | 备注 |
| 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中使用空格，用一个连字符“-”也许更好。
标签： blogger, blogging, javascript
正在读取评论...Info
这篇文章由 Dennis Lee 在 2006年11月20日，23:10 发表，目前有 ... 条评论，欢迎您参与讨论。如果您需要转载此文，请确保让我知道，并建议使用 Trackback 将转载信息通知到本页面。