Next 7.0+ TagCanvas 标签云

Next 7.0+ 可以对标签进行自定义设置，在此基础上，可以使用球形标签云的 tagcanvas.js 插件进行样式修改，具体修改步骤如下

1.下载插件

关于球形标签云 tagcanvas.js 插件的详细介绍：点击这里

将该插件下载后，放入 /theme/next/source/js 目录下

2.新建标签云 swig 文件

在 /theme/next/layout/_partials 目录下，建一个名为 tagcanvas.swig 的文件，并写入如下内容：

<div class="tags" id="myTags">
  <canvas width="500" height="500" id="my3DTags">
    <p>Anything in here will be replaced on browsers that support the canvas element</p>
  </canvas>
</div>
<div class="tags" id="tags">
  <ul style="display: none">
    {{ tagcloud({
        min_font   : theme.tagcloud.min,
        max_font   : theme.tagcloud.max,
        amount     : theme.tagcloud.amount,
        color      : true,
        start_color: theme.tagcloud.start,
        end_color  : theme.tagcloud.end})
    }}
  </ul>
</div>
<script type="text/javascript" src="/js/tagcanvas.js"></script>
<script type="text/javascript" >
  window.onload = function() {
    try {
      TagCanvas.Start('my3DTags','tags',{
        textFont: 'Georgia,Optima',
        textColour: null,
        outlineColour: 'black',
        weight: true,
        reverse: true,
        depth: 0.8,
        maxSpeed: 0.05,
        bgRadius: 1,
        freezeDecel: true
      });
    } catch(e) {
      document.getElementById('myTags').style.display = 'none';
    }
  };
</script>

3.修改 page.swig

对 /theme/next/layout/ 中的 page.swig 文件进行修改

找到如下图所示的部分，将红框内的部分删除

删除之后，在相应位置添加如下代码

{# tagcanvas plugin 球型云标签 #}
{% include '_partials/tagcanvas.swig' %}

4.修改主题 _config.yml

打开 /theme/config.yml，找到 tagcloud 字段，根据实际需要进行修改即可：

# 标签云设置页面
tagcloud:
    min: 12 # 最小字体尺寸，以px为单位
    max: 30 # 最大字体尺寸，以px为单位
    start: "#ccc" # 开始颜色 (hex, rgba, hsla or color keywords)
    end: "#111" # 结束颜色 (hex, rgba, hsla or color keywords)
    amount: 200 # 标签数量，当大于200个后，请进行更改

效果图