Blogbus Hack 2 : 打造Tag Clouds效果

最近在弄个blogbus的模板，折腾了几天，难产again…暂时性转移到另一个idea上来，给blogbus的tags输出做成tag clouds(标签云)效果。什么是Tag呢? 自己去看blogbus的help吧。什么是Tag Clouds呢? 请看下面这个效果图，tag文字大小依据使用频率多少区分开来，使用Tag Clouds可以更清楚的传达what’s your blog all about，更多的信息看SmashingMagazine的这篇文章Tag Clouds Gallery: Examples And Good Practices吧。

Blogbus的tag输出方式是固定的，排列顺序由使用最多的到使用最少的，你可以设定显示tag的数目，为了更好的Tag Clouds效果，建议设置显示数目大点(太大了，也不是件好事，至于为什么，我待会再说)。正是因为Blogbus的封装处理，要hack这种Tag Clouds效果只能从javascript+CSS入手了 (注:此hack不适用于旧版blogbus模板系统)

JAVASCRIPT部分

<script type="text/javascript">
function tagClouds(id, maxsize, minsize) {
        if (!document.getElementById || !document.getElementsByTagName) return;
        if (!document.getElementById(id)) return;

        var taglist = document.getElementById(id);
        var tag = taglist.getElementsByTagName('li');
        var maxcount = parseInt(tag[0].getElementsByTagName('span')[0].firstChild.nodeValue.substring(1,3));
        var mincount = parseInt(tag[tag.length-1].getElementsByTagName('span')[0].firstChild.nodeValue.substring(1,3));
        var offset = (maxsize-minsize)/(maxcount-mincount);

        for (var i=0;i<tag.length;i++) {
                var count = parseInt(tag[i].getElementsByTagName('span')[0].firstChild.nodeValue.substring(1,3));
                var weight = (count-mincount)*offset+minsize;
                tag[i].getElementsByTagName('a')[0].style.fontSize = weight+'em';
        };
}

window.onload = function() {
        tagClouds('tags', 2.2, 1); 
        //2.2 和 1 分别为TagClouds的最大字号与最小字号值，2.2表示是普通字号的2.2倍
}
</script>

上面这段代码加哪的话你还是看我第一篇hack吧。补充一点，如果你也用了我那个”保存评论框信息”的脚本的话，你可以把这两段代码都放到一个<script type="text/javascript"> ... </script>中间，两段window.onload可以合并为如下格式，并放到代码的最后面。

window.onload = function() {
        tagClouds('tags', 2.2, 1);
        rememberFormInputs('commentForm','input_',120); //另一个脚本程序
}

CSS部分

将以下代码加入到blogbus模板里的CSS处:

#tags ul li {display:inline;margin-left:6px;}

#tags ul li span{display:none;} /*如果你不希望显示诸如[36]的tag使用次数的话*/

HACK说明

hack思路解释

因为是hack，不是tutorial，我只说下前面那段javascript的思路就是了。求出最大使用频率tag与最小使用频率tag之间的使用数差值，然后通过你所设置的maxsize和minsize之差除以tag使用数差值求得位移量。利用for循环来算出每个tag比最小使用频率tag的位移量多多少，再赋予CSS中的font-size属性，实现字号的不同。

其中要注意的是，因为我用的是parseInt(*.substring(1,3))，意思是从那个类似于[36]的使用频率中截取出数字来，再把string转化为int型。也就是说，如果你自定义了[36]的显示方式为其他的，就可能需要重新调整substring(1,3)中的两个value了，substring的意思是截取第i+1个字符到第j个字符。例如你自定义的显示方式是||36||的话，那需要截取的是第3，第4个字符，substring(1,3)相应调整为substring(2,4)。

CSS中定义的#tags ul li {display:inline;}是为了实现横排，因为li默认是block级别，每一个li占了一行，而inline值只会占据其内容宽度。

你可以自己更改window.onload() ...中tagClouds('tags', 2.2, 1)后面的两个数值大小，它们一个是最大字号，一个是最小字号。我在javascript里设置的font-size用的是em单位，而不是px，因为em比px在字号控制上灵活的多。用px的话，我们只能设置整数值，而em的话，它其实是当前普通字号的倍数值，例如默认的li字号可能是12px，那么一个较大使用频率的tag，它的字号倍数是1.9的话，相应的大小就是12px*1.9=22.8px了，比起直接使用px灵活的多。我的blog上字号设置用的就都是em !

The Downside of this Script

正如我刚才说的，Tag的显示条目数并非越大越好，因为每增加一个tag显示条目数，就意味着程序要多运算一次。而Javascript的运算负担是完全由客户端来承担的，假如你用上千个tag，你把它们都显示出来的话，那浏览者在看你的页面时，光是载入运算那个javascript就要花上不少时间，一般来说，数十个tag还是可以接受的，别忘了电脑的运算速度比人脑快哦!