给blogger的ftp发布增加导航栏标签定位2008/04/0910:12 上午
天涯博弈即是使用blogger.com的ftp发布功能发布的blog。在喜爱blogger简洁、优雅的同时，却也为一些blogger的不足烦恼。
比如blogger.com新版增加的标签功能对于ftp发布来说其实是一个鸡肋。首先，页面模板没有LabelPage这个标签，因此无法针对标签文章页面增加内容和设计；其次，标签文章页面只能显示该标签的最新20篇文章；再次，每次发布带有标签的日志，所有的标签页面都要重新发布一次，效率很低。
在天涯博弈上，blogger的标签是作为分类来使用的。所以，你会发现每篇日志基本上只使用了一个标签。而在近日的首页改版中，标签被正式添加到顶部的导航栏了。这就存在一个可用性问题，如何在浏览标签页时，顶部的导航栏菜单能够聚焦，也就是说该标签菜单背景色切换为红色？
由于模板中不能判断标签页，也无法设置在模板页显示当前标签，因此只好采用javascript来进行。由于标签页都是存储在你ftp上的labels目录，并且以固定的标签编码作为页面名称，比如我的“社会”标签，发布后对应的标签页名称为56S+5Lya.html。既然如此，我们只需要在页面加载完成后判断这个标签页的名称是否对应某个菜单项就可以聚焦了。
实现方式：为导航菜单的各项增加id，如我的命名方式：
<li class="home" id="L0"><a href="/">首页</a></li>
<li class="blog" id="L1"><a href="/labels/56S+5Lya.html">社会</a></li>
<li class="blog" id="L2"><a href="/labels/5LqS6IGU572R6KeG54K5.html">互联网</a></li>
<li class="blog" id="L3"><a href="/labels/5b2x6KeG5YWz5rOo.html">影视</a></li>
<li class="blog" id="L4"><a href="/labels/6ZiF6K+7.html">阅读</a></li>
<li class="list" id="L5"><a href="/labels/6ZqP56yU5bCP6K6w.html">随笔</a></li>实现的js代码：
var cLocation = window.location.toString();//获取当前页面url地址如http://www.tianya8.net/labels/56S+5Lya.html
function changeStyle( idx ){
if(idx!=-1){
document.getElementById("L"+idx).className = "curr";
}
}//如果属于标签页或首页，则将对应的菜单项添加样式
function location_url(){
var former_start = cLocation.lastIndexOf( "/" );
//var former_mid = cLocation.lastIndexOf( "/" , former_start+1);
var former_end = cLocation.indexOf(".html" )
var former_name = cLocation.substring(former_start+1, former_end);
return former_name; // return "/somedir.html"
}//截取文件名（不含“.html”）
function getCurrentPageSubmenu(){
var shortName = location_url();
//alert(shortName);
switch ( shortName ){
case "56S+5Lya" : return 1; break;
case "5LqS6IGU572R6KeG54K5" : return 2; break;
case "5b2x6KeG5YWz5rOo" : return 3; break;
case "6ZiF6K+7" : return 4; break;
case "6ZqP56yU5bCP6K6w" : return 5; break;
case "home" : return 0; break;
default : return -1; break;
}
}//为如果是标签页或首页，则返回相应的值
var curSMenuID = getCurrentPageSubmenu();
changeStyle( curSMenuID.toString() );标签： 互联网视点
指向此文章的链接
<< 主页