😀
这里写文章的前言:
Twikoo是一个简洁、安全、免费的静态网站评论系统,基于 腾讯云开发。一番体验,发现Twikoo真的很强大,目前我决定用它作为主要评论插件。
Twikoo支持支持即时通知反垃圾插件、隐私设置等功能,无需另外登录后台,并且配置方式也十分方便,在页面评论区就可以直接管理评论、配置插件。
notion image

📝 主旨内容

快速配置

在最新版本中 NotionNext已经 支持该评论插件,配置 方法很简单:
在Vercel后台添加一个环境变量 NEXT_PUBLIC_COMMENT_ENV_ID ; 值为您部署好的twikoo后台地址。以我的举例:
notion image
配置好redeploy您的项目即可获得如下配置
notion image
💡 问题来了,twikoo的后台地址怎么获得呢? 借助vercel,您可以非常快速地部署自己的twikoo后台,用于储存评论数据。

Twikoo部署步骤

实践步骤

  1. 复制仓库
    1. 首先 Fork 博主的仓库,输入你自己的仓库名称,点击 Create fork 按钮创建自己的仓库。
      notion image
  1. 创建D1数据库
    1. 登录 Cloudflare,点击左侧栏 存储和数据库 - D1 SQL数据库,点击 创建 按钮,填入 twikoo 作为数据库名后,点击 创建 按钮。
      notion image
      创建成功后回到列表页面,可以找到对应红框中的 ID 复制出来。
      notion image
      然后点击 twikoo 数据库,选择 控制台 页签,将仓库根目录下的 schema.sql 文件中的内容全部复制到输入框中,点击 执行 按钮。
      notion image
      很快数据库表就创建完了,最后修改仓库根目录下的 wrangler.toml 文件中的 database_id 值。
  1. 创建R2存储
    1. 点击左侧栏 R2 对象存储,点击 创建存储桶,填入 twikoo 作为存储桶名称,点击 创建存储桶 按钮。
      notion image
      创建成功后后回到列表页面,就可以看到刚才创建的存储桶了。
      notion image
      再点击 twikoo 进入存储桶,点击 设置 页签,在 公开访问 点击 连接域, 输入你想设置的域名比如 twikoo.r2.example.org。如果还没有个人域名的可以看我的另外一篇博客 如何注册一个域名并托管到Cloudflare
      notion image
      然后点击 继续,再点击 连接域 就会回到设置页面,这时你会看到你设置的域状态为 正在初始化,过几分钟再次刷新状态就变成了 活动
      notion image
      接下来还需要将刚才的域名写入修改仓库根目录下的 wrangler.toml 文件中。
  1. Worker部署
    1. 在 Cloudflare 的左侧栏点击 Workers 和 Pages,点击 创建,再点击 创建 Worker,输入名称 cf-create-worker
      notion image
      然后点击 部署,过一会显示部署成功,再点击 继续处理项目,选择 设置 页签,滚动到构建区域,点击 连接 按钮。
      notion image
      此时右侧会弹出一个面板,先连接你的 Github 账号,然后选择你的仓库,如果列表中找不到可以直接输入仓库名,比如 twikoo-cloudflare,再选择 main 分支。
      notion image
      然后在 部署命令 的输入框中填入 npx wrangler deploy --minify,最后点击 连接 按钮保存。
      如果在前一步的列表中仓库名是手动输入的,你需要在这里点击 管理 按钮,跳转到 Github 登录账号。
      notion image
      完成登录后进入 Repository access 页面,点击 Select repositories 按钮,选择你的仓库后点击 Save 按钮。
      notion image
      此时页面会跳转回 Cloudflare,有可能会报一个错误,不用管它,直接关闭页面就可以了。
      现在把前面修改的 wrangler.toml 文件保存并提交到 Github 仓库,此时就会触发 Worker 的自动构建了,过一会你就会在 Workers 和 Pages 页面看到部署已经更新,点击 访问 按钮,一切正常的话,你会看到这样的内容。
  1. 绑定域名
    1. 再次点击 twikoo-cloudflare 进入 设置 页签,在 域和路由 中点击 添加,右侧弹出 域和路由 面板。点击 自定义域,输入你想要绑定的域名,比如 twikoo.example.org,点击 添加域 按钮。
      notion image
      添加完成后你的域名就和部署的 Worker 绑定好了。
  1. 配置在NotionNext
    1. 将您的twikoo后台地址配置在NotionNext的后台,并redeploy即可。
      notion image

🎉🎉🎉🎉🎉

到此完成~ 点击右下角的小齿轮即可配置您的管理员密码、并进行更多的功能设置。赶快体验吧~
notion image

其他设置

配置评论模块

点击评论区的小齿轮图标,首次进入需要设置密码,设置完就会进入管理面板,点击 配置管理 页签进行初始配置。
notion image
点开 隐私,在 IMAGE_CDN 处输入 cloudflare,点击 保存 按钮启用图片上传功能。
notion image
其余每个配置项都有很详细的说明,大家可以自行慢慢摸索,不修改也已经可以正常使用了。

防止机器人

发表评论时可以使用 Cloudflare Turnstile 的检查来阻止机器人,如果需要启用先在 Cloudflare 的左侧栏点击 Turnstile,点击 添加小组件 按钮。
notion image
小组件名称可以随便填写,比如 twikoo,点击下面的 添加主机名 按钮会在右侧弹出面板。在最上面的输入框填入个人博客的域名,比如 blog.example.org,点击右侧的 添加 按钮,主机名就会出现在下面的已选择主机名列表中。再点击最下面的 添加 按钮,右侧面板关闭,主机名会添加到 主机名管理 区域的列表中。最后点击右下角的 创建 按钮,就会显示已成功创建 Turnstile 小组件。
notion image
在这个页面上 站点密钥 和 密钥 是你需要复制下来配置到 Twikoo 的管理面板中的。接下来再次打开管理面板,点开 反垃圾,在 TURNSTILE_SITE_KEY 处填入 站点密钥 的内容,在 TURNSTILE_SECRET_KEY 处填入 密钥 的内容,点击 保存 关闭面板。
notion image
完成后再次发表评论就会出现 Cloudflare 的机器人检查框了,大部分情况下等一会就会显示成功,或者出现一个勾选框确认后检查成功,只有极少数情况会发起 JS质询 进行挑战。
notion image

🤗 总结归纳

cloudfare使用D1和R2存储桶,D1值保存,r2自定义域名值后保存→fork并修改twikoo-cloudfarewrangler.toml中有关她两的值→cloudfare部署page→修改notion-next环境变量部署

📎 参考文章

  • Hexo博客系列(二) 为你的博客添加评论系统 | 一梦一孤舟
 
💡
有关Twikoo安装或者使用上的问题,欢迎您在底部评论区留言,一起交流~
 
Notion作为图床或者文件存储库【教程】如何美化qBittorrent界面?通用WebUI使用教程
Loading...