最近在弄个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模板系统)
<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); //另一个脚本程序
}
将以下代码加入到blogbus模板里的CSS处:
#tags ul li {display:inline;margin-left:6px;}
#tags ul li span{display:none;} /*如果你不希望显示诸如[36]的tag使用次数的话*/
因为是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 !
正如我刚才说的，Tag的显示条目数并非越大越好，因为每增加一个tag显示条目数，就意味着程序要多运算一次。而Javascript的运算负担是完全由客户端来承担的，假如你用上千个tag，你把它们都显示出来的话，那浏览者在看你的页面时，光是载入运算那个javascript就要花上不少时间，一般来说，数十个tag还是可以接受的，别忘了电脑的运算速度比人脑快哦!
Blogbus的评论系统有两点让我极为不爽: 一是评论过滤机制，导致我的留言经常莫名其妙的被拒绝发表(我连双脚都举起来保证我绝对没有发表任何有违和谐的信息)；二是评论框不会在提交留言之后记录我的用户信息(Name, E-Mail, URL)，每次留言我都得手动填写。这前一点不爽的谁也没办法，谁叫我们要和谐呢，后面这点的话我们可以通过在模板里加入一段javascript来保存评论者的cookie信息。我得先申明，对Javascript我也基本属于入门阶段，以下代码中很大程度参考自PPK的这篇文章Javascript - Cookies。
Blogbus最近改版一次后，新的模板系统不再允许修改评论框了，所有模板的评论框都是统一规范的，所以这个脚本适用于任何新版模板系统的任何模板，旧版的话我稍后补充。对于新版模板的话，你需要做的只是在header(前提是你先的启用自定义模板来修改)里加入以下代码:
function setCookie(name,value,days) {
if(days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = ";expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function rememberFormInputs(form_id, prefix, days) {
if(!document.getElementById(form_id)) return false;
var form = document.getElementById(form_id);
var inputs = form.getElementsByTagName('input');
for (var i=0; i
对于使用旧版模板系统的，因为模板的不同，并不能保证所有留言框都有名为commentForm的ID，你需要修改自定义模板里的Comment.Form模块，其中有这么一句:
修改为:
然后在header里的之上照旧添加上面那段代码就是了。
至于那段代码什么意思，我也懒的解释了，懂一点javascript的都能看懂，不懂的知道怎么用就行了 :D Keep in mind, this is NOT a tutorial, but a little hack
更新: 刚写了个GreaseMonkey小脚本，如果你装了Firefox和这个插件的话，再装上我这个脚本程序，以后无论你所访问的blogbus博客有没有添加我上面的那段script，使用的是新模板系统还是旧的，都能通过这个脚本程序保存你的信息。
脚本下载地址 : rememberTheName.user.js
这是一个致力于挖掘，完善blogbus功能，分享blogbus小技巧和非官方资源的博客。所谓"hack"，就是在官方未能达到实现某种功能之前，自己通过各种"邪门歪道"来实现它。
欢迎有兴趣的朋友加入到这个博客中来，一同完善这个站，提供更多有用的资源/技巧给blogbus用户们。
这是我的e-mail联系地址(Dont Spam It for God's Sake):
punkid.online@gmail.com