JQCloud: 一個前端生成美化標籤雲的簡單JQuery插件

本文原文地址：https://jiang-hao.com/articles/2018/blog-JQCloud.html

由於博客須要，發現了一個生成美化簡約風格的標籤雲的JQuery插件。

官網地址：http://mistic100.github.io/jQCloud/index.html

使用方法很簡單，能夠把JS和CSS文件下載到本地，也能夠直接經過Script標籤src=「」的方法在線引用。

具體的使用方法官網都能查到。

頁面效果展現：https://jiang-hao.com/tags/

靜態的效果大概是這樣：

貼出本身微博使用JQCloud的前端代碼：

<script src="{{ SITEURL }}/theme/jqcloud.js"></script>
<link href="{{ SITEURL }}/theme/jqcloud.css" rel="stylesheet">
<script>
    var words = [];
    {% for tag, articles in tags|sort %}
        words.push({text: "{{tag}}", weight: Math.random(), link: '{{ SITEURL }}/{{ tag.url }}'});
    {% endfor %}
    {% for category, articles in categories %}
        words.push({text: "{{category}}", weight: Math.random(), link: '{{ SITEURL }}/{{ category.url }}'});
    {% endfor %}
    $(function() {
        $("#tagcloud").jQCloud(words, {
            autoResize: true
        }); 
    });
</script>
<div id="tagcloud" style="width: 80%; height: 450px; align-self: center;"></div>

須要注意的是要包含標籤雲的div模塊須要顯示指定width和height，不然須要在JavaScript中進行相關設置。 

踩坑1：由於要基於JQuery，注意引用的JQuery庫可用。因爲以前引用的是外網谷歌的庫，國內被牆致使標籤雲一直沒有刷出來，後來換成了bootcdn的JQuery庫就成功了：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>