自定义 reCAPTCHA 的外观和风格

重要提示：1.0 版的 reCAPTCHA API 已不再受支持，请升级到 2.0。了解详情

在网站上成功安装 reCAPTCHA 后，您可能需要更改其外观。本页面介绍了如何：(1) 选择标准 reCAPTCHA 主题之一；(2) 如何完全自定义 reCAPTCHA 的外观；(3) 如何通过更改 widget 的语言来将 reCAPTCHA 国际化。

标准主题背景

为了让 reCAPTCHA 微件显示不同的主题背景，您首先需要在主 HTML 页面中的 <form> 元素出现之前（位于显示 reCAPTCHA 的 <form> 元素之前）添加以下代码（如果放置在首次调用 reCAPTCHA 的主脚本之后，此命令就会不起作用）：

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'theme_name'
 };
 </script>

如需使用标准主题，您需要将 'theme_name' 替换为以下四个主题名称之一：

'red' [红色]（默认主题）	'白色' [white]
“黑杯”	“干净”

自定义主题

借助自定义主题，您可以精确地控制 reCAPTCHA 映像的显示方式。（点击此处查看自定义主题演示。）如需使用自定义主题，您必须先将 RecaptchaOptions 的主题属性设置为“自定义”。这会告知 reCAPTCHA 不应创建自己的界面。reCAPTCHA 将依赖具有以下 ID 的 HTML 元素来向用户显示人机识别系统：

• ID 为 recaptcha_image 的空 div。这是实际图片的放置位置。div 将为 300x57 像素。
• 具有 ID 和名称的文本输入均设置为 recaptcha_response_field。用户可以在此输入答案。
• （可选）包含整个 reCAPTCHA widget 的 div。此 ID div 应放置在 custom_theme_widget 中，并且 div 的样式应设为 display:none。reCAPTCHA 主题代码完全加载后，div 就会显示。此元素可避免页面在加载时闪烁。

若要实现上述所有功能，请先将以下代码放置在主 HTML 页面中任意位置，即位于显示 reCAPTCHA 的 <form> 元素前面的任意位置：

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };
 

然后，在要显示 reCAPTCHA 的 <form> 元素内放置：

 <div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>

请注意，最后几行内容只是本指南介绍的简介中介绍的展示 reCAPTCHA 的标准方式。

以下是上述代码所发生的情况。Recaptcha JavaScript 对象提供了一些方法，可让您更改人机识别系统的状态。方法 reload 显示新的人机识别系统质询，而 switch_type 方法在图像和音频人机识别系统之间切换。为了创建 reCAPTCHA 的完整界面，我们会在人机识别系统处于不同状态时显示不同的信息。例如，当用户查看图片人机识别系统时，系统会显示“获取音频人机识别系统”链接。您可以使用四个 CSS 类来创建有状态界面：

CSS 类	在以下情况下显示...
recaptcha_only_if_image	显示人机识别系统图片
recaptcha_only_if_audio	显示音频 CAPTCHA
recaptcha_only_if_incorrect_sol	之前的解决方案不正确
recaptcha_only_if_no_incorrect_sol	之前的解决方案不正确

虽然主题确实为您提供了许多选项，但您需要遵循一些界面一致性规则：

• 您必须在人机识别系统微件附近说明您正在使用 reCAPTCHA。
• 您必须提供调用重新加载函数的可见按钮。
• 您必须为视障用户提供一种访问音频人机识别系统的方法。
• 对于在 reCAPTCHA widget 中用作按钮的任何图片，您必须为其提供替代文本。

国际化：更改微件的语言

将 reCAPTCHA widget 国际化有以下两种方法：

内置翻译

reCAPTCHA 有许多内置翻译。您可以通过设置 RecaptchaOptions 的 lang 参数来使用这些参数：

<script type="text/javascript">
var RecaptchaOptions = {
   lang : 'fr',
};
</script>

自定义翻译

如果没有您所用语言的翻译版本，您可以自行构建相应版本。您需要转换 reCAPTCHA JavaScript 中的所有字符串，并设置 RecaptchaOptions 的“custom_translations”变量。您未设置的任何字符串都将采用您语言的默认翻译。您可以仅替换默认翻译的一部分（例如，如果我们选择的译文不适合您所在的区域）。例如：

<script type= "text/javascript">
var RecaptchaOptions = {
   custom_translations : { instructions_visual : "This is my text:" }
};
</script>

以下是自定义意大利语翻译的示例（请在调用 reCAPTCHA 之前放置以下代码）：

<script type="text/javascript">
        var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Scrivi le due parole:",
                        instructions_audio : "Trascrivi ci\u00f2 che senti:",
                        play_again : "Riascolta la traccia audio",
                        cant_hear_this : "Scarica la traccia in formato MP3",
                        visual_challenge : "Modalit\u00e0 visiva",
                        audio_challenge : "Modalit\u00e0 auditiva",
                        refresh_btn : "Chiedi due nuove parole",
                        help_btn : "Aiuto",
                        incorrect_try_again : "Scorretto. Riprova.",
                },
                lang : 'it', // Unavailable while writing this code (just for audio challenge)
                theme : 'red' // Make sure there is no trailing ',' at the end of the RecaptchaOptions dictionary
        };
</script>

RecaptchaOptions 参考文档

您可以在 RecaptchaOptions 字典中设置以下字段：

键	可能的值	默认值	含义
主题	'red' [红色] | 'white' | 'blackglass' | 'clean' | 'custom'	'red' [红色]	定义要用于 reCAPTCHA 的主题。红、白、黑屏和干净主题是预定义的主题，其中 reCAPTCHA 提供界面。在自定义主题中，您的网站可以完全控制 reCAPTCHA 外观。
语言	任何受支持的语言代码。	“en”	预定义的主题在界面中使用哪种语言。支持以下语言： 语言 编码 英语 en 荷兰语 nl 法语 fr 德语 de 葡萄牙语 pt 俄语 ru 西班牙语 es 土耳其语 tr 如果您的网站语言不受支持，您可以随时使用自定义主题将 reCAPTCHA 以您的语言显示。
custom_translations	翻译字典	null	使用此方法可指定 reCAPTCHA 字符串的自定义翻译。
自定义主题微件	包含 DOM 元素 ID 的字符串	null	使用自定义主题时，这是一个包含 widget 的 div 元素。如需了解如何使用此功能，请参阅“自定义主题”部分。
Tabindex	任意整数	0	为 reCAPTCHA 文本框设置 tabindex。如果表单中的其他元素使用 Tabindex，则应该设置此标记，以便用户更轻松地导航

例如，以下脚本标记使 reCAPTCHA 采用白色主题，且采用 Tabindex 2：

<script>
var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};
</script>