今天无聊浏览网页,发现标签云挺炫的,于是就尝试给自己的博客弄一个。下面是制作方法,大家看完后可以弄一个属于自己的Tag-Cloud。
1、什么是标签云:
维基百科上定义是:
A tag cloud (word cloud, or weighted list in visual design) is a visual representation of text data, typically used to depict keyword metadata (tags) on websites, or to visualize free form text.Tags are usually single words, and the importance of each tag is shown with font size or color. 译:标签云(在可视化设计领域又叫词云或权重列表)是一种文本数据可视化的代表,经常用在网站上来描述关键词或使自由形式文本可视化。通常使用字体的大小和颜色表示权重。
下面是我在Google上搜索了几种略带艺术感的标签云:
2、选取标签源
进入正题:通常标签云会选择tags作为标签源,由于我主页没有开放标签list,因此这里选取《随笔分类》作为标签源。
下图为查看随笔分类的源码结构:
附属说明:由于我们不是在自己写的网站上实现标签云,所以会存在一定的限制,不过博客园开放了自己定制页面和插入JS代码使我们定制自己的标签云成为可能。如果你对没尝试过美化页面、添加JS代码,我建议你看看:http://www.cnblogs.com/asxinyu/p/Bolg_Category_For_BlogBeauty.html,然后再来定制自己的标签云。
3、用JS解析标签源
通过分析页面中随笔分类的HTML结构发现:用于构建标签云的信息在div类名为catListPostCategory下的ul中,主页结构可以抽象成下面的代码形式: