本篇内容主要源于：

更新记录

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 在国内被墙导致无法使用的问题

修改主题配置文件

摘自 Butterfly 安裝文檔(四) 主題配置-2

打开_config.butterfly.yml，找到评论那块，改成使用twikoo

1
2
3
4
5
6
7
8
9
10
11
12
13
# Comments System
# --------------------------------------

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus
  use: twikoo # Valine,Disqus
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

再在下方找到Twikoo并设置，下面是我的样例

1
2
3
4
5
6
7
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId: https://twikoo-notsprog.vercel.app/
  region: ap-shanghai
  visitor: true
  option:

重启Hexo，能看见评论系统已启用

前车之鉴

  • 如果你配置好后发现是这个样子，很可能是因为 Butterfly 主题的版本过低导致的

开启图床支持（已弃用）

2022年09月11日更：本节已弃用，暂无免费图床可供使用

可以让用户把图片上传到自己的图床，然后通过 Markdown 语法导入图片

本节内容源自官方文档

这里我选择直接嫖杜老师的 api 了，毕竟感觉也不会有多少图片

当然，如果有一天支持了阿里云 OSS 之类的，我会迁过去，毕竟总是白嫖别人的不好意思

打开设置页面-> 插件，启用 7bu 图床，把 token（e3113626842a06ccf273ecbaa2b1f431） 粘贴进去，然后保存，刷新页面

可以看到已经成功实现了图片上传功能

更新 Twikoo

如你所见， Twikoo 时常会进行更新，关于更新了什么，可以到releases页面进行查看

以下操作源于官方文档

首先打开vercel的仪表盘页面，并进入你的项目页面，之后点击下面的储存库地址

编辑package.json

改为最新的版本号

等待Vercel编译完成，就完成了更新