docs(pages): hCaptcha “强兼” reCaptcha？

1. 新增友链：MC_Kero的 blog 2. docs(pages): captcha
2026-05-31 01:20:06 -04:00 · 2025-08-13 16:53:42 +08:00
parent c5af07d1c8
commit e3d3b4d759
8 changed files with 66 additions and 15 deletions
@@ -21,5 +21,8 @@
  "frontMatter.dashboard.openOnStart": false,
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
  }
 }
@@ -9,43 +9,35 @@ draft: false
 showcover: false
 customcover: ../assets/images/cloudflare-turnstile-verify-error.png
 ---
-
 <head>
    <!-- Google reCaptcha v2-->
    <!-- <script src="https://www.google.com/recaptcha/api.js" async defer></script> -->
    <script src="https://recaptcha.net/recaptcha/api.js" async defer></script>
    <!-- Cloudflare Turnstile -->
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" defer async></script>
+    <!-- hCaptcha -->
+    <script src="https://hcaptcha.com/1/api.js?recaptchacompat=off&hl=zh" async defer></script>

 </head>

-
 你好~
 我的 Captcha 还蛮多的，欢迎你们来这里玩，玩累了就直接刷新，没问题的~

-:::NOTE["抱歉"]
+:::NOTE[抱歉]
 现在只有两家 Captcha，后续会慢慢补上其他 Captcha 的！
 :::

 # Google reCaptcha V2
 ## 休闲版（不保证）
-
-<form action="?" method="POST">
-    <div class="g-recaptcha" data-sitekey="6LerBqQrAAAAAJm_8-H-wq25iSKxprYEW8G_XYhi"></div>
-</form>
+<div class="g-recaptcha" data-sitekey="6LerBqQrAAAAAJm_8-H-wq25iSKxprYEW8G_XYhi"></div>

 ## 挑战版（不保证）
+<div class="g-recaptcha" data-sitekey="6LcQFKQrAAAAAFg294vepQULbQX11BXa0NTt-21h"></div>

-<form action="?" method="POST">
-    <div class="g-recaptcha" data-sitekey="6LcQFKQrAAAAAFg294vepQULbQX11BXa0NTt-21h"></div>
-</form>
-
-<br>
+---

 # Cloudflare Turnstile
-
 <div id="example-container"></div>
-
 <script is:inline>
  function onloadTurnstileCallback() {
    // 确保 turnstile 对象已加载
@@ -61,3 +53,17 @@ customcover: ../assets/images/cloudflare-turnstile-verify-error.png
    }
  }
 </script> 
+
+---
+
+# hCaptcha
+## 简单模式
+<div class="h-captcha" style="margin: 0; display: inline-block;" data-sitekey="96520da8-ea64-4416-bbcc-f1bc1602bcc4"></div>
+
+## 困难模式
+<div class="h-captcha" style="margin: 0; display: inline-block;" data-sitekey="2bca1990-f990-4430-987a-5b7a1522e26e"></div>
+
+---
+
+# Arkose Labs FunCAPTCHA
+<iframe src="https://iframe.arkoselabs.com/3EE79F8D-13A6-474B-9278-448EA19F79B3/index.html" width="700" height="500" frameborder="0" allowfullscreen></iframe>
@@ -0,0 +1,35 @@
+---
+title: hCaptcha “强兼” reCaptcha？
+published: 2025-08-13
+tags: ["网站", "验证"]
+description: 一次出3个 hCaptcha？瞧瞧你干的好事！
+image: ../assets/images/hCaptcha-localhost-errkey.png
+category: 记录
+---
+
+# 强兼 Google reCaptcha 失败？
+如你所见，这是 hCaptcha 无法验证的样子。当然，如果你在一个页面同时放上 [Google reCaptcha](https://developers.google.com/recaptcha?hl=zh-cn)（我的是 v2）和 [hCaptcha](https://www.hcaptcha.com)，那么聪明的 hCaptcha 会 [开始兼容它](https://docs.hcaptcha.com/configuration) 。
+![hcaptcha-recaptchacompat-origin](../assets/images/hcaptcha-recaptchacompat-origin.png)
+
+**译文：**  
+![hcaptcha-recaptchacompat-translated](../assets/images/hcaptcha-recaptchacompat-translated.png)
+
+---
+
+[posts/captcha/](/posts/captcha/)  
+而开启后却是这样的：
+![hcaptcha-three-boxes](../assets/images/hcaptcha-three-boxes.png)
+
+没错，出现了 3 个 hCaptcha 框。而且出现的位置就在 reCaptcha 的位置。哇，强兼失败？
+
+byd 太气人了这。
+
+---
+
+# 解决方法
+将 hCaptcha 的脚本请求 URL 加上 `?recaptchacompat=off` 即可：
+```html
+<script 
+    src="https://hcaptcha.com/1/api.js?recaptchacompat=off" async defer>
+</script>
+```
@@ -86,6 +86,13 @@ import { Icon } from "astro-icon/components";
                <div class="text-sm text-black/50 dark:text-white/50">什么都想了解一点</div>
            </a>

+            <a href="https://blog.mckero.com" target="_blank" class="friend-card">
+                <div class="flex items-center gap-2">
+                    <img src="https://pub-3f1fec3195b64bb4974955567a77da00.r2.dev/OIP.jpeg" loading="lazy" class="w-5 h-5 rounded">
+                    <div class="font-bold text-black dark:text-white">MC_Kero的 blog</div>
+                </div>
+                <div class="text-sm text-black/50 dark:text-white/50">依稀当年泪目干！</div>
+            </a>
        </div>

        <!-- 申请友链 -->