Turnstile 其实就是一个 Cloudflare 做的人机验证小组件。

前些时日换了 Sodesu 作为 Waline 的评论前端，体验很好，的确是符合文档里写的体积极小。但是在部分场景，比如我的博客，遇到人机验证就麻烦大了。有一位读者发评论表示（通过 Giscus 发的）：

虽然可以通过登录来规避，但是因为 Waline 调用的是外部的 OAuth 服务（oauth.lithub.cc），保密性不够好；再说，有些人用 GitHub 登录，用户界面是 GitHub 提供的隐私邮箱¹，连回复都收不到邮件。

究其原因还是 Sodesu 前端为了尽可能精简，没有做 Turnstile 的功能。也好办，我自己复刻一份仓库实现一个就成。仓库名也很直接：SFH (Sodesu for Haku)，而在 npm 上，它的包名为 @karlbaey/sodesu-for-haku。

自己的修改

本来就没想过有人会用，就瞎糊了一点。

最主要的修改在于 src/components/CommentBoxFooter.tsx，里面加了几个状态监控，就可以接上 Cloudflare 了。不太懂 UnoCSS，还是用的 Tailwind CSS 的原子类。

Turnstile 在这里申请。

改到 0.1.0 版本之后发现人机验证一加载页面就跳出来了，因此还在 0.2.0 版本把行为改成了按下提交按钮后才触发人机验证。

关于博客主题，在提交 730e071bbd2b02cec52b46b66d20000b64249e60 里面有完整的修改记录。

引入

本来没打算扔到 npm 上。但是后来为了用 jsDelivr CDN 还是这么做了。

首先就是老生常谈的 DNS 污染问题。cdn.jsdelivr.net 换成 cdn.jsdmirror.com 解决大部分问题。

我的 Hugo 主题托管在 Karlbaey/Haku 上，只要改几个域名跟路径就行。

-  const SODESU_SCRIPT_SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/sodesu.aio.umd.js";
+  const SODESU_SCRIPT_SRC = "https://cdn.jsdmirror.com/npm/@karlbaey/sodesu-for-haku@latest/dist/sodesu.aio.umd.js";

-    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/[email protected]/dist/sodesu-comment.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-material-dark.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@karlbaey/sodesu-for-haku@latest/dist/sodesu-for-haku.css" />
+    <link rel="stylesheet" href="https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/prism-themes/1.9.0/prism-material-dark.min.css" />

这样就可行了。