将评论组件切换到twikoo

keyle_xiao

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

使用twikoo加载完毕回调

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

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 一栏填写评论组件的地址即可，其他不需要填写

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的后台界面直接导入即可。