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

效果图

3D标签云

安装

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

  1. 先下载它的 js 脚本文件 jquery.svg3dtagcloud.min.js, 放到 /themes/next/source/js/src 目录下;
  2. /themes/next/layout/_scripts/ 目录下添加模板文件 svg3dtagcloud.swig, 代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
{% 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 参数可以参考上面提供的官网上的说明使用;

  1. 最后需要在 tags 页面中某个位置载入上面定义的模板文件, 在 <div class="tag-cloud">...</div> 标签内部最底下加入如下代码即可:
1
2
3
{% block svg3dtagcloud %}
{% include '_scripts/svg3dtagcloud.swig' %}
{% endblock %}

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

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


--------------------本文至此结束  感谢您的阅读--------------------

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

文章作者:Memento

发布时间:2019年04月25日 - 16:04

最后更新:2019年04月25日 - 19:04

原始链接:https://memento.net.cn/post/dcfce0c7.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Memento wechat
欢迎您扫一扫上面的微信公众号, 订阅阁主公众号!
坚持原创技术分享, 您的支持将鼓励我继续创作