2、twikoo使用
twikoo评论系统
版权
警告
本着开源共享、共同学习的精神：
本文是在 博主《从 01 开始》 文章：《评论区》https://www.peterjxl.com/Blog/Comment/ 基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者《从 01 开始》 所有。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~（这里万分感谢原作者的优质文章😜，感谢开源，拥抱开源💖）
前期调研
默认无评论功能
vue-vdoing评论最佳实践有哪些？
官方推荐有4款vuepress的评论插件
https://doc.xugaoyi.com/pages/ce175c/
01 vuepress-plugin-comment 39star
https://github.com/dongyuanxin/vuepress-plugin-comment
02 vuepress-plugin-vssue 780star
03 vuepress-plugin-vssue-global 4star
https://github.com/u2sb/vuepress-plugin-vssue-global
04 twikoo 1.6k star
https://github.com/twikoojs/twikoo
开源项目vdoing-template（vdoing大佬）--vuepress-plugin-vssue插件
https://github.com/eryajf/vdoing-template
测试效果
登录成功后发布的评论：
呃呃，这个vssue需要登录成功后才能看评论。。。。
他这个主题评论还是挺漂亮的哇
不知道是用什么来做的评论系统？？？
https://wiki.eryajf.net/pages/b2f34c/
youngkbt.cn大佬文章
https://notes.youngkbt.cn/about/website/comment/
他的评论效果：
https://notes.youngkbt.cn/about/website/comment/
《从01开始》大佬
https://www.peterjxl.com/Blog/Comment/#常见的评论区插件
github discussions评论系统（docus）
自己之前利用github discussions给docus搭建的评论系统
评论区
一个网站如果有评论功能，可以更好的和读者互动。VuePress 也有很多评论插件，这里简单介绍下，最后介绍本站所使用的 Twikoo。
大部分评论插件都是使用的 Github 或 Gitee 的 issue 功能，也就是用 issue 去存储评论；而 Twikoo 则是将数据保存到本地。
常见的评论区插件
Vssue：Vssue 简单来说就是 VuePress + issue，专门用来 VuePress 的评论功能。博主曾尝试过，但好像和其他插件冲突了，这里不详述。
想要使用请参考 Vssue 官网：https://vssue.js.org/zh/guide/
GitTalk ：https://github.com/gitalk/gitalk
Gitment：https://imsun.net/posts/gitment-introduction/
Valine：https://valine.js.org/
ArtTalk：https://wiki.eryajf.net/pages/b74c2b/
由于本文采用的是 Twikoo，因此着重讲下其怎么配置。
注册
管理 Twikoo
配置好后，就可以在每个文章下面看到评论区，在评论区的右边发现有一个「蓝色小齿轮」，这就是管理面板：
第一次 点击小齿轮后会让你输入登录密码，请记住它，如果忘记了密码，请参考官网文档解决。
管理面板的用处：
- 可以查看、删除、隐藏、显示、置顶任意的评论
- 配置你的个人信息，登录管理面板后评论系统能识别你的身份（博主）
- 配置反垃圾模块，防止别人发送不雅的评论
- 配置通知，别人的评论可以通过 邮件 / 微信 / QQ 等方式通知你
- ..............
(https://image.peterjxl.com/blog/image-20230219113538-b7wxzzl.png)
反垃圾
腾讯云是提供了反垃圾评论服务的，提供 1 个月的免费试用，到期后选择后付费即可，25 元/万条。
注意不要购买套餐，非常贵，最少都是 4k 大洋的，180w 条，大部分网站用不着这么多。
控制台地址：https://console.cloud.tencent.com/cms/text/package
然后我们配置反垃圾，输入获取到的 secret id：
本次先不配置这个东西。。。
邮件通知
如何知道有人给网站评论了呢？我们可以使用邮件通知、即时通知。
可以在管理面板里开启邮件通知。如果使用的是 QQ 邮箱，则需要授权码，而不是 QQ 密码，QQ 邮箱这样的设计可能是为了防止 QQ 被盗吧？具体步骤可参考：qq 邮箱授权码如何获取-百度经验 (opens new window)（如果是其他邮件，同理）：
配置完后，可以测试下能不能正常收到邮件：
效果：当有评论后会有邮件提醒：
即时通知：Twikoo 支持多种即时通知，QQ，微信，钉钉，telegram 等等，自行按需配置即可：
自己配置效果：
案例：自己给自己网站发评论，自己的邮箱是收不到的……
关于显示头像
Twikoo 评论区还支持 Gravatar 头像：
什么是 Gravatar？简单来说就是全球通用头像，只要你去 Gravatar 的网站上设置一个邮箱和头像，这样在其他支持 Gravatar 的网站上，你输入邮箱就能自动获取你的头像。读者可以去 https://cravatar.cn (opens new window)上注册邮箱，然后就可以了（由于 CDN 缓存的问题，可能得过几个小时才能正常显示）。
Twikoo 也提供了自定义头像 CDN 地址的功能，具体可以看官网文档：
这里自己更换头像一直存在问题。。。。
搁置吧。
2024年12月24日
关于显示 IP
在设置后有相关的部分：
注意，并不会显示 IP，而是显示省份，有些人会误以为后面显示的是 IP，其实是浏览器版本：
自己配置：
关于显示语言
Twikoo 支持简体中文、繁体中文、English。此外欢迎 提交翻译 PR (opens new window)。
至于管理面板显示什么语言，得看浏览器使用的语言了：
关于博主标识
如果是博主，在发表评论时会有一个“博主”标识：
注意，发表评论时，用户昵称和邮箱得和配置的一样，否则是没有这个标识的。
也可以自定义这个标识：
自己测试效果：
数据导出和定期备份
Twikoo 也支持数据的导入/导出，数据格式为 JSON。
如果想要自动定期备份，可以参考这篇博客：使用 GitHub Actions 自动备份 Twikoo 评论数据 | 小嘉的部落格(opens new window)
更新 Twikoo
具体参考官网文档：版本更新 | Twikoo 文档(opens new window)
注意，前端的 JS 文件也要更新，直接修改版本号即可，例如本例中用的是：
['script', { src: 'https://cdn.staticfile.org/twikoo/1.6.7/twikoo.all.min.js' }],更新为：
['script', { src: 'https://cdn.staticfile.org/twikoo/1.6.38/twikoo.all.min.js' }],小结
本人使用过几个评论区插件， 但都配置失败了，折腾了很久都不行，最后还是用了 Twikoo，并且配置的过程中还加进了 Twikoo 的 QQ 群去咨询，也是折腾了很久才可以。
如果读者配置的过程遇到了什么问题，请不要灰心，遇到问题就尽量去解决，总是能成功的。
注意事项：
- 每个页面加载评论区的时候，使用了 JS 的
document.getElementById("twikoo")方法来加载评论区（参考刚刚的“前端配置 Twikoo”小节） - 所以，在写博客的时候，文章的标题请不要取成单独的“Twikoo”，这样会导致评论区样式混乱。
- 例如，本博客的小标题都不是单独的“Twikoo”，而是诸如“Twikoo 的安装”、“Twikoo 的目录结构”之类的。
twikoo文档
https://twikoo.js.org/faq.html
测试效果
