为 NexT 主题添加球型标签云

确定你已开启标签功能

参考 NexT 配置文档 添加标签页面 ，开启标签功能。

了解球形标签云插件

了解球形标签云 javascript 插件，点击这里

下载插件

下载 js 插件 tagcanvas.js

放入对应目录

将下载的 tagcanvas.js 放入主题目录 themes/NexT/source/js/custom/tagcanvas.js，custom 为新建文件夹。

新建标签云文件，引用 js

在 themes/NexT/layout/_partials 下建一个 plugin 文件夹，在该目录下 touch 一个名为 tagcanvas.swig 的文件，并写入如下内容：

<div class="tags" id="myTags">
  <canvas width="350" height="350" 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: 16,
      max_font: 35,
      amount: 999,
      color: true,
      start_color: 'red',
      end_color: 'red',
    }) }}
  </ul>
</div>
<script type="text/javascript" src="/js/custom/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) {
      // something went wrong, hide the canvas container
      document.getElementById('myTags').style.display = 'none';
    }
  };
</script>

使用 tagcanvas.swig

在 themes/NexT/layout/page.swig 中作如下修改：

替换红框中原来位置的 div 标签为如下：

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