评论系统从valine转到twikoo

其实我想换评论系统有一段时间了，因为valine加载变得很慢，而且我知道的就有过三次抽风，一直无法把评论加载出来。但碍于一直没有找到喜欢的评论系统，就让它继续在边上凉着。

最近在逛博客圈时，看到林木木大佬新启用的评论系统Twikoo，一看觉得还不错，就试着去官网看了一下，此评论系统是选择部署在腾讯云——云开发 CloudBase上的，正所谓大树好乘凉，我也有了转投之心。想干就干~

跟着Twikoo中文文档一步步去进行相关的环境部署，简单且顺利，看得出作者@iMaeGoo_虹墨很用心，教程写得相当的易懂。不一会儿我就顺利的搭建完成了。

1
2
3

<div id="tcomment"></div>
<script src="https://cdn.jsdelivr.net/npm/twikoo@0.4.1/dist/twikoo.all.min.js"></script>
<script>twikoo.init({ envId: '您的环境id', el: '#tcomment' })</script>

可当我将上面代码修改成我的环境ID后引入到Hugo时，却直接报错。直接懵掉，我记得我是完全按照教程来的，而且我自问自己也很注意细节的，所以这次报错真让我懵圈了，检查了两三次有没有输错函数名，环境ID之类的，无果，也确定了我的操作没有出错。

这时看到官网上有个QQ群的二围码，我也申请了进去，准备向人求教。没想到群里的大佬、小伙伴们如此热心，帮我出各种各样的主意，最后评论系统的作者还亲自一步一步帮我排查，下午几个小时里群里基本都在围绕我出现的这个问题在讨论，可惜最终我们也没有找到问题所在，但可以确定的是我部署的步骤是没有出错的。

最后因为我到点要去接两大神兽放学，讨论也就此结束。这里不禁多提一句，之前我接入valine上时也出现了部分评论只显示[]，自己研究无果后也加入了valine的QQ群，在上面请教了几次，却没有人理会我，也不知道是不是我乱入的姿势不对还是其他什么原因。总之跟这次的感觉差距太大了。

回到正题，接完孩子回家后我心不死，继续在Twikoo这个问题上纠结，回想了一下下午在群友交流的方案，当时有个小伙伴说有可能你遇到腾讯云——云开发 CloudBase的BUG了，当时我在想，死马当活马医吧，也许真就这个问题，于是把环境、云函数，数据库全删了，重新激活、重新部署。当然这波操作的结果显而易见，要是成功了也没接下来的事了。

不过回想到这里时，我心中就有了另一个想法，因为我确信自己没有操作错误，作者和群友也说教程是完全可以部署成功的，所以我想是不是我选择的这个“广州”节点出问题了，CloudBase上有两个节点，一个广州，一个上海，反正问题都这样了，不如去上海这个节点再建个环境部署试试，结果这一试，成了。

终于松了口气，折腾了一个下午，可算找到原因了，向作者反映了情况，他也没想到，他说，广州这个节点是12月17号才开放的，之前只有一个上海节点，所以就没往这个方面去想。他向腾讯的开发提问，得到的回复cloudbase-js-sdk上需添加地域参数，具体可查阅https://github.com/TencentCloudBase/cloudbase-js-sdk/issues/5

反正我是不懂了，如果你也想使用Twikoo的话，记得选择上海的节点哦，不过我相信作者在下个版本更新肯定会修正这个问题的。作者在第二天的零晨就已经更新了版本，也修复了上述问题。点赞~

既然我的问题解决了，接下就针对主题进行相应的样式修改吧。其实要修改的地方也不多，毕竟一眼讨喜的东西，我因为主题字体设置问题，才要稍微进行改动，相信一般的直接引用就可以了。

1. 在主题/layouts/partials/comments.html适当位置添加引用

1
2
3
4
5

  <div class="post bg-white">
  <div id="tcomment"></div>
  <script src="https://cdn.jsdelivr.net/npm/twikoo@0.4.2/dist/twikoo.all.min.js"></script>
  <script>twikoo.init({ envId: '环境ID', region: 'ap-guangzhou', el: '#tcomment' })</script>
  </div>

2. 在主题/assets/sass/_partial/ _post/文件夹新建一个twikoo.scss

 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

// ==============================
// twikoo comment
// ==============================
.tk-comments-title span {
  font-size: 20px;
}

.tk-action-link span {
  font-size: 18px;
}

.OwO-logo svg {
  width: 18px;
  height: 18px;
}

.tk-action-icon svg {
  width: 18px;
  height: 18px;
}

.tk-meta {
  font-size: 16px;
}

.tk-extra {
  font-size: 12px;
  font-family: 'EB Garamond','Noto Serif SC',serif;
}

.tk-content {
  font-size: 16px;
}

.tk-footer {
  font-family: 'EB Garamond',serif;
}

3. 在主题/assets/sass/_partial/ _post.scss适当位置添加一行

1

@import '_post/twikoo';

至此修改完成，其实也就是简单地对相应的样式定义。以上记录只作为本人的笔记使用，用作预防以后自己忘记。请根据自己使用的主题进行定义你喜欢的样式。

最后将valine上的数据导入到Twikoo里，使用Twikoo官方提供的迁移脚本，轻易搞定。

Valine到Twikoo迁移脚本：https://github.com/imaegoo/twikoo-import-tools