经过半个月的等待在昨天拿到了域名的备案号,现已经将空间移至国内空间,速度明显加快了。

效果图

之前用的Wordpress博客有个球形标签云插件,现在用Hexo也考虑弄个,最后效果如图:标签云
http://7xibui.com1.z0.glb.clouddn.com/2015/12/screenshot-area-2015-12-15-102411.png

开始制作

首先介绍球形标签云官方js插件地址:http://www.goat1000.com/tagcanvas.php

里面包含了详细说明,看例子应该很容易明白,利用html5Canvas绘图。

这里我使用的是独立版本的tagcanvas.js,不知道为什么jquery版本不行- -

下载上述tagcanvas.js,放到主题文件夹/js下,修改主题布局文件/layout/_partial/page-tags.ejs,参考如下

<hr>
<br>
<%- list_categories() %>

<script src="/js/tagcanvas.js" type="text/javascript"></script>

<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>
  <%- tagcloud({
      min_font: 16,
      max_font: 35,
      amount: 999,
      color: true,
      start_color: 'blue',
      end_color: 'red',
  }) %>
 </ul>
</div>
<style type="text/css">
    .category-list li, .tags li{
        display: inline;
        font-size: 1.2em;
        margin-right: 1em;
        line-height: 60px;
        border: 1px solid lightgray;
        padding: 6px;
    }
    .category-list a {
        color: gray;
    }
    .category-list:hover a {
        color: gray;
        text-decoration: none;
        font-weight: bold;
    }
    .category-list-count {
        margin-left: 2px;
        font-size: .9em;
    }
    .article-entry ul li:before{
        display: none;
    }
    .article-inner  {
        text-align: center;
    }
    .article-meta {
        display: none;
    }
    .article-header {
        padding-right: 35px;
    }
    #container .article .article-title {
        padding-right: 0;
    }
    .tags {
        max-width: 40em;
        margin: 2em auto;
        margin-top: 0em;
    }
    .tags a {
        margin-right: 1em;
        line-height: 65px;
        border-bottom: 1px solid gray;
    }
    .tags a:hover {
        font-weight: bold;
        text-decoration: none;
    }
    .category-list-child {
        display: none;
    }
</style>

    <script type="text/javascript">
      window.onload = function() {
        try {
          TagCanvas.Start('my3DTags','tags',{
            textFont: 'Georgia,Optima',
            textColour: null,
            outlineColour: '#ff00ff',
            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.Start();参数表中,这里有具体配置选项:Options

接着到博客根目录下,找到/node_modules/hexo/lib/plugins/helper,修改tagcloud.js,找到如下代码

result.push(
'<a href="' + self.url_for(tag.path) + '" style="' + style + '">' +
(transform ? transform(tag.name) : tag.name) +
'</a>'
);

加上<li></li>标签,如下

result.push(
  '<li><a href="' + self.url_for(tag.path) + '" style="' + style + '">' +
  (transform ? transform(tag.name) : tag.name) +
  '</a></li>'
);

大功告成,剩下的就是部署了。