你的位置:首页 > 软件开发 > Java > [前端] 1、分享一个基于博客园的标签云制作方法

[前端] 1、分享一个基于博客园的标签云制作方法

发布时间:2016-08-04 02:00:12
今天无聊浏览网页,发现标签云挺炫的,于是就尝试给自己的博客弄一个。下面是制作方法,大家看完后可以弄一个属于自己的Tag-Cloud。 1、什么是标签云:维基百科上定义是:A tag cloud (word cloud, or weighted list in visual d ...

[前端] 1、分享一个基于博客园的标签云制作方法

 

 

今天无聊浏览网页,发现标签云挺炫的,于是就尝试给自己的博客弄一个。下面是制作方法,大家看完后可以弄一个属于自己的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上搜索了几种略带艺术感的标签云:

[前端] 1、分享一个基于博客园的标签云制作方法

 

 

2、选取标签源

进入正题:通常标签云会选择tags作为标签源,由于我主页没有开放标签list,因此这里选取《随笔分类》作为标签源。

下图为查看随笔分类的源码结构:

[前端] 1、分享一个基于博客园的标签云制作方法

 

 


附属说明:由于我们不是在自己写的网站上实现标签云,所以会存在一定的限制,不过博客园开放了自己定制页面和插入JS代码使我们定制自己的标签云成为可能。如果你对没尝试过美化页面、添加JS代码,我建议你看看:http://www.cnblogs.com/asxinyu/p/Bolg_Category_For_BlogBeauty.html,然后再来定制自己的标签云。


 

 

3、用JS解析标签源

通过分析页面中随笔分类的HTML结构发现:用于构建标签云的信息在div类名为catListPostCategory下的ul中,主页结构可以抽象成下面的代码形式:

 1 <!DOCTYPE html"> 2 <html> 3   <head> 4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5   </head> 6  7   <body> 8     <div class="catListPostCategory"> 9       <h3 class="catListTitle">10         随笔分类11         <span style="font-size:11px;font-weight:normal">(407)</span>12       </h3>13       <ul>14         <li><a id="CatList_LinkList_0_Link_0" href="http://www.cnblogs.com/zjutlitao/category/640062.html">笔记_读书(3)</a> </li>15         <li><a id="CatList_LinkList_0_Link_1" href="http://www.cnblogs.com/zjutlitao/category/697496.html">笔记_浅学IT(1)</a> </li>16         <li><a id="CatList_LinkList_0_Link_2" href="http://www.cnblogs.com/zjutlitao/category/557591.html">笔记_异常解决(17)</a> </li>17         <li><a id="CatList_LinkList_0_Link_3" href="http://www.cnblogs.com/zjutlitao/category/775930.html">笔记_转载</a> </li>18         <li><a id="CatList_LinkList_0_Link_4" href="http://www.cnblogs.com/zjutlitao/category/759821.html">核心_编译原理(1)</a> </li>19         <li><a id="CatList_LinkList_0_Link_5" href="http://www.cnblogs.com/zjutlitao/category/608496.html">核心_操作系统(9)</a> </li>20         <li><a id="CatList_LinkList_0_Link_6" href="http://www.cnblogs.com/zjutlitao/category/759824.html">核心_通信协议</a> </li>21         ...22       </ul>23     </div>24   </body>25 </html>

原标题:[前端] 1、分享一个基于博客园的标签云制作方法

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。