快捷菜单
常用功能一站直达
更多功能请点顶栏「快捷菜单」

:::warning
本着开源共享、共同学习的精神:
本文是在 博主《从 01 开始》 文章:《评论区》https://www.peterjxl.com/Blog/Comment/ 基础上增加了一些自己的实际操作记录和修改,内容依旧属于原作者《从 01 开始》 所有。转载无需和我联系,但请注明文章来源。如果侵权之处,请联系博主进行删除,谢谢~(这里万分感谢原作者的优质文章😜,感谢开源,拥抱开源💖)
:::

vue-vdoing评论最佳实践有哪些?
https://doc.xugaoyi.com/pages/ce175c/

https://github.com/dongyuanxin/vuepress-plugin-comment


https://github.com/u2sb/vuepress-plugin-vssue-global

https://github.com/twikoojs/twikoo

https://github.com/eryajf/vdoing-template

测试效果
登录成功后发布的评论:

呃呃,这个vssue需要登录成功后才能看评论。。。。

他这个主题评论还是挺漂亮的哇
不知道是用什么来做的评论系统???
https://wiki.eryajf.net/pages/b2f34c/

https://notes.youngkbt.cn/about/website/comment/

他的评论效果:
https://notes.youngkbt.cn/about/website/comment/


自己之前利用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,因此着重讲下其怎么配置。


配置好后,就可以在每个文章下面看到评论区,在评论区的右边发现有一个「蓝色小齿轮」,这就是管理面板:

第一次 点击小齿轮后会让你输入登录密码,请记住它,如果忘记了密码,请参考官网文档解决。
管理面板的用处:
(https://image.peterjxl.com/blog/image-20230219113538-b7wxzzl.avif)
腾讯云是提供了反垃圾评论服务的,提供 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,其实是浏览器版本:

自己配置:


Twikoo 支持简体中文、繁体中文、English。此外欢迎 提交翻译 PR (opens new window)。
至于管理面板显示什么语言,得看浏览器使用的语言了:

如果是博主,在发表评论时会有一个“博主”标识:

注意,发表评论时,用户昵称和邮箱得和配置的一样,否则是没有这个标识的。
也可以自定义这个标识:

自己测试效果:


Twikoo 也支持数据的导入/导出,数据格式为 JSON。
如果想要自动定期备份,可以参考这篇博客:使用 GitHub Actions 自动备份 Twikoo 评论数据 | 小嘉的部落格(opens new window)
具体参考官网文档:版本更新 | Twikoo 文档(opens new window)
注意,前端的 JS 文件也要更新,直接修改版本号即可,例如本例中用的是:
1['script', { src: 'https://cdn.staticfile.org/twikoo/1.6.7/twikoo.all.min.js' }],更新为:
1['script', { src: 'https://cdn.staticfile.org/twikoo/1.6.38/twikoo.all.min.js' }],


本人使用过几个评论区插件, 但都配置失败了,折腾了很久都不行,最后还是用了 Twikoo,并且配置的过程中还加进了 Twikoo 的 QQ 群去咨询,也是折腾了很久才可以。
如果读者配置的过程遇到了什么问题,请不要灰心,遇到问题就尽量去解决,总是能成功的。
注意事项:
document.getElementById("twikoo") 方法来加载评论区(参考刚刚的“前端配置 Twikoo”小节)https://twikoo.js.org/faq.html




日历 · 精选 · 友链 · 更多
如果内容对你有帮助,欢迎请我喝杯咖啡 ☕



One的公众号
爱折腾博客的小白