hexo-tag-cloud标签云使用与优化


字数:868 阅读时长:4分钟 阅读:85

Hexo默认主题landscape自带的tagcloud标签云不是太美观,于是在npm网站上搜索了一下,最终决定使用 hexo-tag-cloud 插件,使用了Canvas渲染,有3D效果,整体效果还是不错的。

Hexo-标签云

安装插件

1
npm i -S hexo-tag-cloud

使用

Hexo默认使用的是ejs模板引擎,这里就以 ejs 为例。

  1. 找到 tagcloud.ejs 文件,完整路径如下:

    hexo/themes/landscape/layout/_widget/tagcloud.ejs
    

    修改为以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
<% if (site.tags.length) { %>
<script type="text/javascript" charset="utf-8" src="<%- url_for('/js/tagcloud.js') %>"></script>
<script type="text/javascript" charset="utf-8" src="<%- url_for('/js/tagcanvas.js') %>"></script>
<div class="widget-wrap">
<h3 class="widget-title"><%= __('tagcloud') %></h3>
<div id="myCanvasContainer" class="widget tagcloud">
<canvas width="300" height="300" id="resCanvas" style="width:100%;height:100%;">
<%- tagcloud() %>
</canvas>
</div>
</div>
<% } %>
  1. hexo/themes/landscape/source/js 目录下新建 tagcloud.jstagcanvas.js 文件,内容可以打开如下链接进行复制:

  2. 整体展现如下图所示,具体交互效果可以浏览 本站 的标签云。

天問-TagCloud

优化

原插件中Canvas设置的是固定宽高,虽然设置了 style="width:100%;",当屏幕宽度改变,Canvas大小看似也跟着改变了,但实际上内部widthheight的值依然没有变化,这就导致展示的Canvas会被放大或缩小变糊,影响整体美观。所以在此基础上做了一点点优化。

  • tagcloud.js 逻辑优化
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// tagcloud.js
// 优化代码 4 start
document.addEventListener('DOMContentLoaded', loadTagCloud)
// 优化代码 4 end

// 优化代码 3 start
// 防抖函数
function debounce(fn, delay){
var timer = null;
return function(){
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
};
};
// 优化代码 3 end

function loadTagCloud() {
// console.log('tag cloud plugin rock and roll!');

try {
// 配置参数 5 start
TagCanvas.textFont = 'Helvetica';
TagCanvas.textColour = '#409EFF';
TagCanvas.textHeight = 16;
TagCanvas.outlineColour = '#E6A23C';
TagCanvas.maxSpeed = 0.05;
TagCanvas.freezeActive = true;
TagCanvas.outlineMethod = 'block';
TagCanvas.minBrightness = 0.2;
TagCanvas.depth = 0.92;
TagCanvas.pulsateTo = 0.6;
TagCanvas.initial = [0.1,-0.1];
TagCanvas.decel = 0.5;
TagCanvas.reverse = true;
TagCanvas.hideTags = false;
TagCanvas.shadow = '#fff';
TagCanvas.shadowBlur = 3;
TagCanvas.weight = false;
TagCanvas.imageScale = null;
TagCanvas.fadeIn = 500;
TagCanvas.clickToFront = 600;
TagCanvas.lock = false;
// 配置参数 5 end

// 渲染
render()

function render() {
// 优化代码 1 start
var $box = $('#resCanvas');
var dpr = 1.2
$box.get(0).width = $box.width() * dpr;
$box.get(0).height = $box.width() * dpr;
// 优化代码 1 end
TagCanvas.Start('resCanvas');
TagCanvas.tc['resCanvas'].Wheel(true)
}

// 优化代码 2 start
$(window).resize(throttle(render, 500));
// 优化代码 2 end

} catch(e) {
// console.log(e);
document.getElementById('myCanvasContainer').style.display = 'none';
}
};

优化点

  1. Canvas的widthheight根据外层容器的宽度来设置。code:优化代码 1
  2. 使用resize监听window屏幕的大小变化,动态设置Canvas宽高,重新渲染Canvas画布。code:优化代码 2
  3. 使用debounce防抖函数,控制重新渲染Canvas的次数,提高整体性能。code:优化代码 3
  4. documentDOMContentLoaded事件替换原来的window.onload事件,这样不用等待图片加载完毕再渲染Canvas,可以大大提升tagCloud的展示速度。code:优化代码 4

优化后的js文件:

温馨提示: 可以根据自己的主题来设置标签云中动画时间、文字大小、颜色、点击颜色、点击效果等等,具体参数如上所示code:配置参数 5

参考文档:


欢迎访问:个人博客地址

本文作者: Tiven
发布时间: 2021-10-18
最后更新: 2021-12-02
本文标题: hexo-tag-cloud标签云使用与优化
本文链接: https://www.tiven.cn/p/8dbf2af/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^