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>