Type
Status
Date
Tags
Slug
Summary
Category
Password
✍️ Related to MyNotes
Icon
这篇博客主要记录为自己的博客添加utterances和twikoo两种评论系统的过程。
📝 前言
我的博客是采用NotionNext搭建的，详细的搭建流程可以查看我之前写的博客《利用NotionNext快速搭建个人博客》，这个方案的好处在于快速，对零基础不懂代码的朋友特别友好，并且博客本身是用Notion来写的，Notion流畅的书写体验使得写博客本身变得有趣。关于评论系统呢，NotionNext目前支持7种，我选择的是其中的Utterance和Twikoo。Utterance评论需要github账号的登录，但部署快速，简单。而Twikoo支持各种邮箱的评论，但部署步骤稍微繁琐一些。废话不多说，下面就把我的配置流程记录一下。
📝 Utterance
Utterance是基于Github issues构建的一个轻量级的评论系统，特点是免费、开源、无广告。
部署步骤
- 点击下面的链接，创建一个Github的仓库，用来存放评论的数据。
- 点击该链接：https://github.com/apps/utterances，在Github中安装utterance插件。
- 允许utterance插件访问步骤1中创建的仓库。
- 到vercel中配置NotionNext的环境变量
NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO，值为github用户名/步骤1创建的仓库名，如NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO=github用户名/myblog-utterrances_comments。
- 在Vercel重新部署你的NotionNexit项目。
- 效果如图所示
📝 Twikoo
Utterance虽然部署简单，但评论者必须要拥有并登录Github账号，这对非Github用户的读者不太友好。为此，在Utterance的基础上，我又为我的博客添加了Twikoo评论系统。
Twikoo也是一个免费、开源的静态网站评论系统，相比Utterance，支持更丰富的功能，比如，可以支持个性化的标识、图片评论以及对垃圾评论进行过滤等。
部署步骤
- Twikoo是基于MongoDB数据库运行的，因此首先点击该链接：https://cloud.mongodb.com/v2/65bdc506f232b846e4540eb7#/clusters，创建一个在线的MongoDB数据库。
注意：选择用户名和密码访问MongoDB数据库。另外访问数据库的IP地址，设置为0.0.0.0，即允许所有地址都访问。
- 获取MongoDB数据库的链接地址
链接地址格式为：mongodb+srv://你设置的用户名:你设置的密码@blog-comments.jqh9cs7.mongodb.net/?retryWrites=true&w=majority。记得要把<你设置的密码>两边的<>去掉。
- 打开以下链接，并fork twikoo项目到自己的新仓库。
- 打开vercel，创建新项目，并导入步骤3创建的新仓库。
- 配置Root Directory
依次选择
src→server→vercel-min ，点击Deploy开始部署。- 部署完成后，打开项目的设置，添加
MONGODB_URI环境变量，值为步骤2中MongoDB的链接地址。
- 部署后，为确保twikoo的服务能被公开访问，关闭vercel后台的权限验证。
- 获取twikoo的访问域名
- 在NotionNext项目中添加环境变量
NEXT_PUBLIC_COMMENT_ENV_ID，值为步骤8中的twikoo服务的域名，然后重新部署你的NotionNext项目。
- 最终的效果如图所示：
另外，twikoo支持你自定义你的头像标识，前往https://cravatar.cn/通过邮箱注册并设定头像，评论时，留下与注册相同的邮箱即可。
🤗 总结归纳
评论系统是博主与读者良好交流必不可少的部分，utterrance和twikoo都是两款不错的评论系统，前者部署简单、快捷。后者虽然部署相比前者繁琐，但支持更多的个性化且支持的邮箱种类更加丰富。
📎 引用或提到的资源
- tangly1024. NotionNext. https://github.com/tangly1024/NotionNext.
- Mr.Charley. 利用NotionNext快速搭建个人博客. https://blog.rahc.top/article/how-to-setup-blog.
- Utterances. https://github.com/utterance/utterances.
- Twikoo. https://twikoo.js.org/.
- Atlas. https://cloud.mongodb.com.
- tangly1024. NotionNext文档. https://docs.tangly1024.com/about.
有关Utterance和Twikoo评论系统在安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
- Author:Mr.Charley
- URL:https://blog.rahc.top/article/tech-share-blog-comment
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts