[Hexo 博客插件系列-04] 3D标签云 svg3dtagcloud

效果图

3D标签云

安装

该实现主要是基于一个 JQuery 插件工具, 叫 SVG 3D Tag Cloud jQuery plugin, 官网可以参考: jquery-svg3dtagcloud-plugin.

先下载它的 js 脚本文件 jquery.svg3dtagcloud.min.js, 放到 /themes/next/source/js/src 目录下;
在 /themes/next/layout/_scripts/ 目录下添加模板文件 svg3dtagcloud.swig, 代码如下:

{% if site.tags.length > 1 %}
  <script src="/js/src/jquery-2.1.1.min.js"></script>
  <script src="/js/src/jquery.svg3dtagcloud.min.js"></script>
  <div id="tag-cloud" style="border-top: 1px grey solid; margin-top: 50px;overflow-x: auto;"></div>
  <script>
    function init_3d_tag_cloud(){
        var entries = []
        var tagsstr = '{% for tag in site.tags %}entries.push({label: "{{ tag.name }}", url: "{{ url_for(tag.path) }}", target: "_top"});{% endfor %}'
        eval(tagsstr)
        var settings = {
            entries: entries,
            width: 480, // 宽度
            height: 480, // 高度
            radius: '65%',
            radiusMin: 75,
            bgDraw: false, // 是否显示背景
            bgColor: '#888', // 背景颜色
            opacityOver: 1.00,
            opacityOut: 0.05,
            opacitySpeed: 1,
            fov: 800,
            speed: 2, // 旋转的速度
            fontFamily: 'Oswald, Arial, sans-serif',
            fontSize: '18', // 默认字体大小
            fontColor: '#8B4513', // 默认字体颜色
            fontWeight: 'normal', // bold
            fontStyle: 'normal', // italic 
            fontStretch: 'normal', // wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
            fontToUpperCase: false,
            tooltipFontFamily: 'Oswald, Arial, sans-serif',
            tooltipFontSize: '11',
            tooltipFontColor: 'red',
            tooltipFontWeight: 'normal', // bold
            tooltipFontStyle: 'normal', // italic
            tooltipFontStretch: 'normal', // wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
            tooltipFontToUpperCase: false,
            tooltipTextAnchor: 'left',
            tooltipDiffX: 0,
            tooltipDiffY: 10,
        };
        $('#tag-cloud').svg3DTagCloud(settings);
    }
    init_3d_tag_cloud();
  </script>
{% endif %}

代码中的 settings 参数可以参考上面提供的官网上的说明使用;

最后需要在 tags 页面中某个位置载入上面定义的模板文件, 在 <div class="tag-cloud">...</div> 标签内部最底下加入如下代码即可:

1
2
3

{% block svg3dtagcloud %}
    {% include '_scripts/svg3dtagcloud.swig' %}
{% endblock %}

最后看一下阁主的标签页效果:
效果图

心动不如行动, 赶快自己动手搞一个吧~