白天偶然翻网页的时候看见Tag Cloud的浮云版本,Flash做成的3D效果,感觉比较好玩(莫非我口味太重了)。上网找了找,发现这个最早是Roy Tanck为WordPress开发的插件,既然是flash的,那么感觉google app engine能扛住,于是就开始yy如何移植到Micolog上。本人对flash一窍不通,只能面对Roy的文档和提示慢慢折腾。幸好网上也有很多关于将这个插件移植到其他博客系统的文章,于是边学边干,一个小时就直接上货了。目前已经改好了中文Tag的显示问题。目前对Tag的更新还有点问题(现在用的是比较邪恶的方法),页面格式也还有待调整。
在侧边栏的显示效果大致就是这样的:
Micolog添加Tag Cumulus的大致的方法(这里只是提供比较偷懒的方法,但是效果是一样的):
先去WP-Cumulus上下载Roy做的插件,其实我们只是要其中的flash源代码,所以最好是下载Development Version。
接着开始偷懒的方法,写一个tagcloud.xml文件,格式大致是这样的:
# 添上相应的tag和链接,这里就是偷懒的地方,最终flash就是从这个xml读取tag并显示的。# 好处是不用改太多代码,这样比较方便,坏处是有新的tag的话就要重新修改xml# 但是如果新tag还有中文,那么就可能要重新生成一遍flash了,原因在后面步骤<a style="font-size: 13pt;" title="3 topics" href="../tag/Linux">Linux</a><a style="font-size: 13pt;" title="4 topics" href="../tag/Micolog">Micolog</a>
关键部分,因为Roy原本的cumulus不支持中文,那么我们就要将自己的tag中的中文嵌入到flash中:
参看:3D标签云移植,以及中文版标签云 大致做法就是将前面下载的flash源文件做修改,嵌入自己博客中文tag相关的字体就可以了,这样就有个弊端,就是每次有新的中文tag的话就又可能要重新生成一遍flash。生成flash文件大小最好控制在40K左右,否则页面加载还是很累的。
接着将生成好的tagcloud.swf,tagcloud.xml,swfobject.js三个文件放在tagcloud文件夹中,然后放在micolog文件夹中的static目录中(只要这三个文件就够了,但是也已经很大了。放在micolog下哪里也无所谓)
之后在相应主题文件中修改sidebar.html,注释掉原来的tag输出,在相应位置嵌入flash:
<h2>Tags</h2> # 按照这样注释掉tag输出就可以 {% comment %} {% if tags %} {% for t in tags %} <!--a title="{{ t.tagcount }} pages" href="/tag/{{t.tag|urlencode}}" style="font-size:{{ t.tagcount|tagsize }}pt;">{{t.tag}}</a--> {% endfor %} {% endif %} {% endcomment %} # 在这里添加flash显示,宽度和高度根据主题调整,tspeed是用来调整tag切换速度的,参数参见WP-Cumulus <script type="text/javascript" src="http://xxxxxx.appspot.com/static/tagcloud/swfobject.js"></script><embed tplayername="SWF" splayername="SWF" type="application/x-shockwave-flash" src="http://xxxxxx.appspot.com/static/tagcloud/tagcloud.swf?r=8269298" mediawrapchecked="true" pluginspage="http://www.macromedia.com/go/getflashplayer" id="tagcloudflash" name="tagcloudflash" bgcolor="#ffffff" quality="high" wmode="transparent" allowscriptaccess="always" flashvars="tcolor=0xffffff&tcolor2=0x999999&hicolor=0xffffff&tspeed=100&distr=true" width="180" height="210"></embed>
到这里就完成了,非常偷懒的方法。
有一种jQuery方法实现起来相当简单,当然也就要稍微朴素一点……