其实我想换评论系统有一段时间了,因为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>
  1. 在主题/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;
}
  1. 在主题/assets/sass/_partial/ _post.scss适当位置添加一行
1
@import '_post/twikoo';

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

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

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