AI 摘要
Cloudflare Turnstile是一种现代化的人机验证解决方案，大多数人都应该在注册账户或发表评论时见过，某种程度上Turnstile已经成为了小网站网站装B用的，因为主流的大公司比如openai都是用的这个，所以本文将指导你如何在前端添加Turnstile。
WARNING本文只是教你在前端添加Turnstile装B用，如果你真正想使用Turnstile，请阅读官方文档。
注册Turnstile
要开始使用Cloudflare Turnstile，首先需要注册Cloudflare账号并获取必要的API密钥：
- 访问Cloudflare官网并点击登录。
- 在Cloudflare控制台左侧的边栏找到 Turnstile ，点击 添加小组件 。
- 在创建Turnstile的页面上，填写以下信息：
- 小组件名称：只是一个备注类型的东西，随便填。
- 主机名管理：选择您想要添加Cloudflare Turnstile的网站的域名。
- 小组件模式：选 托管模式 就行
- 点击 创建
- 在Turnstile管理小组件页面上，你会看到 站点密钥 和 密钥 两个Key。稍后我们将使用此密钥来集成Turnstile组件。
前端添加Turnstile组件
现在，我们将在网站前端添加Turnstile组件。
基础HTML集成
在网站HTML文件中的部分添加以下代码：
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>在你想放置Turnstile组件的地方添加以下代码：
<div class="cf-turnstile" data-sitekey="0x4AAAAAAB40GXpBor6G7GZL" data-theme="light"></div>自定义样式和位置
如果默认样式不喜欢，可以通过一些参数进行自定义：
NOTE下文的每一段代码都会在下方附上使用该代码的Turnstile组件示例
小部件尺寸
Turnstile 小部件可以有两个不同的固定大小或一个灵活的宽度大小。
| 大小 | 宽度 | 高度 |
|---|---|---|
| 正常 | 300像素 | 65像素 |
| 灵活 | 100%（最小：300px） | 65像素 |
| 紧凑 | 150像素 | 140像素 |
- normal：默认大小
- flexible：自动适应容器宽度，响应式设计。
- compact：紧凑型小部件，更小的宽度。
你可以通过 data-size 属性来设置小部件的大小。
-
正常大小（默认）
<div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>"></div> -
灵活大小
<div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>" data-size="flexible"></div> -
紧凑型
<div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>" data-size="compact"></div>
主题选项
自定义小部件的明/暗色外观。
- auto（默认）：自动模式
- light：浅色主题，高对比度
- dark：深色主题。
你可以通过 data-theme 属性来设置小部件的主题。
-
自动主题（默认）
<div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>"></div> -
浅色主题
<div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>" data-theme="light"></div> -
深色主题
<div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>" data-theme="dark"></div>
外观模式
使用外观模式控制小组件何时对访客可见。
- always（默认）：始终可见
- execute：仅在挑战开始后才可见。例如仅在用户开始填写表单时才显示。
- interaction-only：仅当需要交互时，小组件才会显示，只有遇到可疑的机器人才会遇到交互式挑战。
你可以通过 data-appearance 属性来设置小部件的外观模式。
-
始终可见（默认）
<div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>"></div> -
仅在挑战开始后可见
<div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>" data-appearance="execute"></div> -
仅当需要交互时可见
<div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>" data-appearance="interaction-only"></div>
重试行为
控制 Turnstile 如何处理失败的挑战。
data-retry 属性可以控制重试行为：
- auto（默认）：自动重试失败的挑战。
- never (从不)：禁用自动重试。
data-retry-interval 属性可以控制重试尝试之间的时间（默认：8000ms）
-
自动重试（默认）
<div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>"></div> -
禁用重试
<div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>" data-retry="never"></div> -
自定义重试间隔
<div class="cf-turnstile" data-sitekey="<YOUR-SITE-KEY>" data-retry-interval="0000"></div>
结尾
至此，你已经成功在网站前端添加了Cloudflare Turnstile组件。现在，当用户访问你的网站时，他们将看到一个Turnstile小部件，反正加着玩吧。