最近在弄个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吧。

wptags

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.21 分别为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之间的使用数差值,然后通过你所设置的maxsizeminsize之差除以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,因为empx在字号控制上灵活的多。用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还是可以接受的,别忘了电脑的运算速度比人脑快哦!

11 Reponses So Far ↓

  1. Hermy:

    lastfm 那个tag cloud可比这个简单多了。。。

  2. punkid:

    如果blogbus本身有提供tag clouds的话,那自然也简单。That’s the reason we need to *hack

  3. half:

    如果想讓鼠標a hover的時候發出音效,應該怎麼寫呢?

  4. punkid:

    google “javascript play sound mouseover”

  5. tinza:

    那么改tag显示数的话
    要改哪里的数字呢?

  6. punkid:

    去后台的“习惯设置”里改“首页关键词数”

  7. blown:

    怎样才能调整tag clouds字体的颜色?

  8. Lionel:

    我按照你写的,设置了下,在google chrome浏览器下成功显示了,但用IE浏览还是看不出效果,请问这是什么原因?如何解决?谢谢~

  9. punkid:

    我用IE6进你的blog看了,有效啊。可能是因为你的页面东西太多,载入过慢导致的。

  10. fps40:

    好用 谢谢

Leave a Reply ↓