Blogbus Hack

如果你是从bus的旧模板系统开始用起的话，一定对Deng Peng和他的几款模板(Simple Blue, Book, etc.)不会陌生。他的blog也设计的很简洁舒服，可惜的是...人家早就移师wordpress了(其实...我也是)，更可惜的是...人家现在的wordpress blog也不存在了。

虽然他的blogbus还是用的旧模板系统，不过其中仍有不少值得“挖”的东西，像tag cloud(晕，早知道我就不自己写直接套用他的了...)，像高亮化当前归档链接，也就是我将要在这里介绍的，当然我做了小小改动来适应新模板系统

功能: 当访问某一历史/Tag/分类档案页面时，会自动高亮显示侧边栏里所对应的历史/Tag/分类链接，并在页面内加入"按XX分类:"的字样

实现方法: 两步走，javascript + CSS。我不打算再解释一遍javascript和CSS该怎么添加的问题了，如果你对于这两者操作有什么不明白的话可以翻下我以前的日志

Javascript部分

var pageType, pageNum, tagId, catId, postId;
var archDate =  new Date();

function classGenerator () {
        var mypath = location.pathname.split("/");

	var cat = /c(\d+)/;
	var index = /index_(\d+)/;
	var post = /(\d+)\.html/;

	if (mypath[1] == "logs") {    
		if (mypath[2].match(post)) {   
			pageType = "single";
			postId = mypath[2].match(post)[1];
		}
		else {                                 
			pageType = "archive month";
			archDate.year = mypath[2];
			archDate.month = mypath[3];
			pageNum = (mypath[4] == "")?"1":mypath[4].match(index)[1];  
		}
	}
	else if (mypath[1] == "" || mypath[1].match(index)) {             
		pageType = "all";
		pageNum = (mypath[1] == "")?"1":mypath[1].match(index)[1];
	}
	else if (mypath[1].match(cat)) {           
		pageType = "archive category";
		catId = mypath[1].match(cat)[1];
		pageNum = (mypath[2] == "")?"1":mypath[2].match(index)[1];
	}
	else if (mypath[1].match('tag')) {     
		pageType = "archive tag";
		tagId = mypath[2]; 	  
		pageNum = (mypath[3] == "")?"1":mypath[3].match(index)[1];
	}

	var body = document.getElementsByTagName("BODY")[0]
	body.className += " " +pageType+ " page-" + ((pageType=="single")?"1":pageNum);
	if (postId) body.className += " post-" + postId;
	if (catId)  body.className += " cat-"  + catId;
	if (tagId)  body.className += " tag-"  + tagId;
}

function toName(id) {
	if (document.getElementById) {
		var list = document.getElementById(id).getElementsByTagName('li');
		var name = "";
		if ( (id == "cats") && catId ){
			for (i=0; i< list.length; i++)
				if (list[i].childNodes[0].href.split("/")[3].slice(1) == catId){
					name = list[i].childNodes[0].childNodes[0].nodeValue;
					list[i].className += " current";
				}
		}
		else if ( (id == "tags") && tagId ) {
			for (i=0; i< list.length; i++)
				if (list[i].childNodes[0].href.split("/")[4] == tagId){
					name = list[i].childNodes[0].childNodes[0].nodeValue;
					list[i].className += " current";
				}
		}
		else if ( id == "archives" ) {
			for (i=0; i< list.length; i++)
				if (list[i].childNodes[0].childNodes[0].nodeValue == (archDate.year + "-" + archDate.month)) {
					name = 	list[i].childNodes[0].childNodes[0].nodeValue;
					list[i].className += " current";
				}
		}
		return name;
	}
}

function addMessage() {                        
	var info = document.createElement("P");
	var type = document.createElement("SPAN");
	var txtNode1, txtNode2;
	switch(pageType) {
	case "archive month":
		txtNode1 = document.createTextNode("按月归档: ");
		txtNode2 = document.createTextNode(toName("archives"));
		break;
	case "archive category":
		txtNode1 = document.createTextNode("按分类归档: ");
		txtNode2 = document.createTextNode(toName("cats"));
		break;
	case "archive tag":
		txtNode1 = document.createTextNode("按Tag归档: ");
		txtNode2 = document.createTextNode(toName("tags"));
		break;
	}

	info.className = "archive-info";
	type.className = "archive-type";
	if (txtNode1 && txtNode2) {
		type.appendChild(txtNode2);
		info.appendChild(txtNode1);
		info.appendChild(type);
		document.getElementById("content").appendChild(info);
	}
}

window.onload = function() {
	classGenerator();
	addMessage();
}

CSS部分

li.current a {color:#C00;}

.archive .archive-info {position:absolute;top:0;height:45px;text-align:center;color:#999;font-size:1.5em;line-height:3em;}

.archive .archive-info span {color:#666;font-weight:bold;}

.archive #content {margin-top: 50px;}

CSS部分因模板而异，这里只是提供一个样本而已，仅供参考

WTF...

如果你对js有所了解的话，你可能会问那段js怎么这么长，明明可以缩减掉很多的。只所以保留了原始代码的绝大部分是因为...瞧瞧这代码写的多elegant，除了做高亮化之外，你还可以利用这段script实现其他功能，为什么不保留它以待将来好好利用呢?