Hexo + Butterfly 建站指南(四)Twikoo 评论系统
本篇内容主要源于:
更新记录
2022-04-09
更正了一个小错误,增加了图片上传功能教程与更新教程
2022-08-11
根据官网更新了 Vercel 的部署链接,很抱歉今天才发现链接从 dev 分支变成了 main 分支
2022-09-11
因为 Vercel.app
在国内被墙,所以可能需要手动添加一个自己域名,请见『Twikoo』解决 Vercel.app 在国内被墙导致无法使用的问题
毫不夸张地说,Twikoo
是我用过最好的静态博客评论系统
预览效果
除了评论功能,还可以记录文章阅读量
搭建过程包括准备数据库和云函数,还有修改主题配置文件
配置数据库和云函数
墙裂建议观看官方视频教程,我也是看了这个视频才成功的
MongoDB
使用MongoDB
数据库来存储数据,先注册 MongoDB 账号
创建免费数据库,类型选择Shared
,区域选择 AWS / N. Virginia (us-east-1)
(因为我已经创建过一个了,所以图中显示要付费)
点击Connect
按钮
键入 0.0.0.0/0
以允许所有 IP 地址的连接,并创建数据库用户(我这里是已经完成了的)
连接方式选择中间的Connect your application
记录下连接字符串,等下使用时记得将其中的 <password>
修改为刚刚设置的用户密码
Vercel
使用Vercel
来运行云函数,先注册 vercel 账号,可以选择从GitHub
之类的登录,也可以选择通过邮箱注册
点击此链接把项目代码部署到你的代码托管网站上去,一般直接选GitHub
(没有GitHub
账号的先去注册)
PS:这个链接请以官网上的为准,之前官网上更新了然后我这里还是旧的,就误导了好多人(自责.jpg)
新建一个储存库用来保存代码
完成后,在导航栏选择Setting
,在左侧选择Environment Variables
,添加变量MONGODB_URI
,值输入刚才的连接字符串,记得修改 <password>
为数据库用户密码
导航栏中选择Deployments
,重新部署一下
回到Overview
,可以看见云函数运行正常
字样,在右边的域名(DOMAINS)
里挑一个记录下你的域名
这一整条 URL
就是你的 环境 ID
注意:因为
Vercel.app
可能在国内被墙,所以可能需要手动添加一个自己域名,请见『Twikoo』解决 Vercel.app 在国内被墙导致无法使用的问题
修改主题配置文件
打开_config.butterfly.yml
,找到评论那块,改成使用twikoo
1 | # Comments System |
再在下方找到Twikoo
并设置,下面是我的样例
1 | # Twikoo |
重启Hexo
,能看见评论系统已启用
前车之鉴
-
如果你配置好后发现是这个样子,很可能是因为
Butterfly
主题的版本过低导致的
开启图床支持(已弃用)
2022年09月11日更:本节已弃用,暂无免费图床可供使用
可以让用户把图片上传到自己的图床,然后通过 Markdown 语法导入图片
本节内容源自官方文档
这里我选择直接嫖杜老师的 api
了,毕竟感觉也不会有多少图片
当然,如果有一天支持了阿里云 OSS 之类的,我会迁过去,毕竟总是白嫖别人的不好意思
打开设置页面-> 插件,启用 7bu
图床,把 token
(e3113626842a06ccf273ecbaa2b1f431
) 粘贴进去,然后保存,刷新页面
可以看到已经成功实现了图片上传功能
更新 Twikoo
如你所见, Twikoo
时常会进行更新,关于更新了什么,可以到releases页面进行查看
以下操作源于官方文档
首先打开vercel的仪表盘页面,并进入你的项目页面,之后点击下面的储存库地址
编辑package.json
改为最新的版本号
等待Vercel
编译完成,就完成了更新