添加Twikoo实现博客在线评论——2023最新版

Vercel部署

注意：按照视频教程中执行到云函数运行成功的步骤时请返回本教程

云函数运行成功

部署方式：https://www.bilibili.com/video/BV1Fh411e7ZH

参考Twikoo文档：https://twikoo.js.org/

视频中下一步要求我们点击DOMAINS链接，但是这个链接已经被墙了，无法访问到，我们需要更改DOMAINS

申请个人域名

阿里云、腾讯云、华为云都可以，我在阿里云申请的

主页搜索域名注册，在搜索记录里点击域名注册

自定义想要的域名

购买域名

域名不需要备案，因为我们只是需要一个二级域名

生成二级域名

在阿里云控制台添加子域名解析记录
首页打开控制台

点击图片中的云解析

点击你购买的域名

点击添加记录

记录类型选择CNAME

主机记录随便写，我填的是blog

记录值设置为你的网站域名，例如我的是：hellodqy.github.io

点击确认

现在已经生成了一个二级域名，但是这个域名并不能打开任何网页，因为它没有与Github Page绑定，本教程不需要绑定！想绑定的话直接去Github的仓库找到CNAME文件，没有的话就自己创建一个，将自己的二级域名添加到文件第一行（内容必须为一行）,此时在地址栏输入自己的子域名就可以跳转到 Github Page 页面了

更改DOMAINS

打开Vercel

将刚刚申请的二级域名填进去，点击Save

然后会出现报错：要求我们到DNS Provider去添加记录

回到这个界面，先删除记录值为你的网站域名的那条记录，再次添加记录

注意：如果你按照我前面给的Github绑定二级域名教程到Github生成了CNAME文件的话，得去删掉CNAME文件

按照报错提示填：类型：CNAME；主机记录：刚刚填的是什么，现在就填什么，比如刚刚申请二级域名我填的是blog，现在就填blog

主要是记录值要改，填报错提示中的value值，点击确认

回到Vercel的这个界面，点击上方的Deployments选项

找到current记录，点击三个点，点击Redeploy

看到DOMAINS是你设置的二级域名就修改正确了

过几分钟，点击查看新的DOMAINS网页中出现云函数运行成功即可，如图：

获取Vercel的环境ID(enVId)

1	https:// + DOMAINS(就是你设置的二级域名)

前端部署

修改主题配置文件_config.butterfly.yml，搜索twikoo，你只需要把获取到Vercel的环境 ID (envId) 填写到配置上去就行，其他不改：

twikoo:
  envId:
  region:
  visitor: false
  option:

然后搜索comments，设置评论应用为：

1 2	comments: use: twikoo

1
2

注意：最新评论只会在刷新时才会去读取，并不会实时变化
由于 API 有 访问次数限制，为了避免调用太多，主题默认存取期限为 10 分鐘。也就是説，调用后资料会存在 localStorage 里，10 分鐘内刷新网站只会去 localStorage 读取资料。 10 分鐘期限一过，刷新页面时才会去调取 API 读取新的数据。（ 3.6.0 新增了 storage 配置，可自行配置缓存时间）

在侧边栏显示最新评论板块

修改主题配置文件 _config.butterfly.yml

# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true