原因很简单,waline的响应太慢了,拉个20余条的评论居然要半分钟。
实在无法忍受,直到今天才抽空换一下评论组件,现在将组件切换为twikoo。
基本做到了评论2秒内刷出来的程度。
下面简单介绍下基于 Maupassant 主题进行评论迁移的过程。
大部分的流程都类似, https://twikoo.js.org/ 的流程文档也比较细,照做就行了。
我这边使用的本地部署,所以直接用docker就行了。

使用twikoo加载完毕回调

这个 onCommentLoaded 回调函数,按照官方文档来讲就是评论区渲染完毕后调用。
我有个需求是将评论数量取出来,放到页面头部,进行一个显示与点击转到评论区。
如果你也有类似功能可以参考下面的初始化代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if theme.twikoo.enable == true
#tcomment
script(src='https://registry.npmmirror.com/twikoo/1.6.39/files/dist/twikoo.all.min.js')
script.
twikoo.init({
envId: '#{theme.twikoo.envId}',
el: '#tcomment',
region: '#{theme.twikoo.region}',
path: '#{theme.twikoo.path}',
onCommentLoaded: function () {
const commentCountElement = document.querySelector('.tk-comments-count');
const targetElement = document.querySelector('.waline-comment-count');
if (commentCountElement) {
const countSpan = commentCountElement.querySelector('span:first-child');
const commentCount = parseInt(countSpan.textContent);
targetElement.textContent = commentCount;
} else {
console.log('未找到评论数量元素');
}
}
})

填写twikoo的初始化参数

如果是本地化部署,需要注意下面的参数填写,envId 一栏填写评论组件的地址即可,其他不需要填写

1
2
3
4
5
twikoo: ## See: https://twikoo.js.org
enable: true ## If you want to use twikoo comment system, please set the value to true.
envId: https://twikoo.vrast.cn ## Tencent CloudBase envId
region: ## Tencent CloudBase region, e.g. ap-shanghai
path: ## Article path, e.g. window.location.pathname

评论数据迁移

waline的数据可以直接导出为json,在twikoo的后台界面直接导入即可。

数据备份

他的数据位于 app/data 内,定期备份下面几个json文件就行了。