twikoo评论区创建

kid14122024-10-142025-03-24

关于在hexo上部署twikoo评论区

本篇文章记录使用 Vercle 部署 Twikoo ，MongoDB 作为数据库将Twikoo评论集成到hexo静态博客中

1.申请MongoDB账号并配置MongoDB数据库

打开MongoDB Atlas 注册页面
注册一个账号或者使用已有的账号
创建一个数据库，地点选择距离 Vercel 较近的位置

配置数据库

导航到Database Access页面：

打开你的MongoDB Atlas控制台。
从左侧导航栏选择Database Access。
点击页面右上角的Add New Database User按钮。
在弹出的窗口中，找到Authentication Method选项。
选择Password作为身份验证方法。
在Password Authentication部分下，填写你希望的数据库用户名。
在密码栏中，建议点击Auto Generate按钮自动生成一个复杂的密码。
确保将自动生成的密码妥善保存，后面部署Twikoo需要用到。

配置数据库用户权限：

向下滚动找到Database User Privileges部分。
展开Built In Role项目。
在Select Role下拉菜单中，选择Atlas Admin角色。授予用户管理员权限。
点击Add User按钮以完成用户创建。

防火墙配置：

打开Network accessList 页面。
ADD IP ADDRESS或 EDIT一个规则，Access List Entry项目填写 0.0.0.0/0

获取数据库连接方式

打开Database页面，找到Connect按钮，选择它
连接方式选择Drivers
将mongodb+srv://开头的字符串中<password>替换为上面设置的密码即可得到数据库连接字符串

删除无用数据库

打开Database页面，找到Browse Collections按钮，选择它
删除默认的数据表

使用Vercel部署Twikoo

注册一个Vercel账号
部署Twikoo
将Twikoo一键部署到Vercel
配置变量环境并调试配置

1.添加环境变量并修改地区：

找到刚才部署的twikoo项目
找到Settings
找到Environment Variables。
添加环境变量 MONGODB_URI，值为前面记录的数据库连接字符串。
找到Deployment Protection。
设置Vercel Authentication为Disabled，然后点击Save。
找到Function,将 Function Region 修改为你需要的地区。

2.重新部署应用：

导航到Deployments。
在任意一项后面点击...更多（三个点）。
点击Redeploy，勾选 Use existing Build Cache然后点击下面的Redeploy

3.配置自定义域：

假设我们的域名托管到Cloudflare并使用Cloudflare加速
找到Domains，添加一个新的自定义域
根据提示设置好Cname 解析并考虑是否使用Cloudflare加速，也可以将域名托管至Vercel

4.验证：

等待解析生效后，使用浏览器直接访问 Twikoo 的域名回显以下内容表示成功

{
  "code": 100,
  "message": "Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置",
  "version": "x.x.xx"
}

把评论部署到hexo博客中

找到并打开主题配置文件_config.主题名称.yml

# Twikoo
# https://github.com/imaegoo/twikoo
twikoo: 
  envId: https://twikoo.kid1412.us.kg
  region: 
  visitor: true
  option:

参数	解释
envId	环境 ID 就是在Vercel中使用的自定义域名
region	环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
visitor	是否显示文章閲读数
option	可选配置

打开

comments:
  # 最多两条评论系统，第一条将显示为默认值
  # Choose: Valine/Waline/Twikoo/Artalk
  use: Twikoo #/Waline这边只使用的twikoo使用只需要开启Twikoo就行
  text: true #在按钮旁边显示评论名称
  # lazyload: 当注释元素进入浏览器的视口时，注释系统将被加载。
  # 如果将其设置为true，则评论计数将无效
  lazyload: false
  count: true # 在帖子的top_img中显示评论数
  card_post_count: false # 在主页中显示评论数