评论组件的实现
今天实现了评论功能,在此详细写下开发过程。
涉及到的技术栈:MonGoDB \ Tencent Cloud \ Vercel \ Butterfly Theme \ Hexo \ Twikoo
详细描述
- 总体描述:这里的评论系统选择了Twikoo,是一个简洁、安全、无后端的静态网站评论系统,基于腾讯云开发。只需要把获取到的环境ID(envId)填写到配置栏。
-
因为没有自己的服务器,便使用免费的 Vercel 进行部署。Hexo 是静态博客,访客没有办法评论,添加一个自己的评论系统就会方便很多。
-
申请 MongoDB Atlas 账号,MongoDB Atlas 是 MongoDB Inc 提供的 MongoDB 数据库托管服务。免费账户可以永久使用 500 MiB 的数据库,足够存储 Twikoo 评论使用。
以下步骤针对新用户,在 MongoDB AtLas 注册完账号以后,创建免费 MongoDB 数据库。(接下来的位置可以选择为Hong Kong)
-
牢记你的用户名与密码
-
创建完用户以后,就可以 close 了。接下来在 Network Access 页面点击 Add IP Address 添加网络白名单。
因为 Vercel 的出口地址不固定,所以我们这里 Access List Entry 输入 0.0.0.0/0(允许所有 IP 地址的连接)。
-
接下来在 Database页面点击Connect,连接方式选择Drivers。
mongodb+srv://yemengstar:你的数据库密码@cluster0.zzsmj.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0 连接字符串包含了连接到 MongoDB 数据库的所有信息,一旦泄露会导致评论被任何人添加、修改、删除,并有可能获取你的 SMTP、图床token等信息。 请妥善记录这一字符串,之后需要填入到 Twikoo 的部署平台里。
-
在 vercel 中部署 twikoo
在https://vercel.com中注册账号 点击这个链接,将 Twikoo 一键部署到 Vercel 出现以下图,证明其已经配置好 -
接下来进入 Settings – Environment Variables,添加环境变量 MONGODB_URI,值为前面记录的数据库连接字符串,即:
-
添加完毕点击 save,然后进入 Settings – Deployment Protection,设置 Vercel Authentication 为 Disabled,并 Save。
-
进入 Deployments , 然后在任意一项后面点击更多(三个点) , 然后点击 Redeploy , 最后点击下面的 Redeploy。等待重新部署完毕。
-
进入项目的 Overview,点击 Domains 下方的链接,如果环境配置正确,可以看到 “Twikoo 云函数运行正常” 的提示。
Vercel Domains(包含 https:// 前缀,例如 https://xxx.vercel.app)即为您的环境 id(envId)。
-
将Twikoo接入 Butterfly
把 envId 修改成你使用的域名,把 visitor 修改为 true:
看到这里,我相信你或许在你的网站上已经看见了评论功能,但遗憾的是,关掉科学上网工具后,不能评论。 请移步至另一篇文章: 点击这里
这次评论功能的实现,丰富了我的技术栈。定期回顾这些知识,以保持清醒的头脑。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 陈同学的桃花源!
评论