重要提示:reCAPTCHA API 1.0 版已不再受支持,请升级到 2.0 版。了解详情
在您的网站上成功安装 reCAPTCHA 后,您可能需要更改其外观。本页介绍了:(1) 如何选择其中一个标准 reCAPTCHA 主题;(2) 如何完全自定义 reCAPTCHA 的外观;(3) 如何通过更改 widget 的语言来使 reCAPTCHA 国际化。
标准主题
如需让 reCAPTCHA widget 显示不同的主题,您首先需要在 HTML 主页面中显示 reCAPTCHA 的 <form> 元素之前的任意位置添加以下代码(如果放置在首次调用 reCAPTCHA 的主脚本之后,则将不起作用):
<script type="text/javascript"> var RecaptchaOptions = { theme : 'theme_name' }; </script>
如需使用标准主题,您需要将 'theme_name'
替换为以下四个主题名称之一:
“red”(默认主题) | '白色' [white] |
---|---|
“blackglass” | '清洁' [clean] |
自定义主题
通过自定义主题,您可以控制 reCAPTCHA 图片的确切显示方式。(如需查看自定义主题的演示,请点击此处)。如需使用自定义主题,您必须先将 RecaptchaOptions
的主题属性设置为“custom”。这会告知 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 | 当前显示的是音频人机识别系统 |
recaptcha_only_if_incorrect_sol | 之前的解决方案不正确 |
recaptcha_only_if_no_incorrect_sol | 前面的解决方案并无错误 |
虽然主题设置确实提供了很多选项,但您需要遵循一些界面一致性规则:
- 您必须在人机识别系统 widget 旁声明您正在使用 reCAPTCHA。
- 您必须提供一个用于调用重新加载函数的可见按钮。
- 您必须为视障用户提供音频人机识别系统。
- 在 reCAPTCHA widget 中用作按钮的所有图片都必须提供替代文本。
国际化:更改小程序的语言
国际化 reCAPTCHA widget 有两种方法:
内置翻译
reCAPTCHA 包含多种内置翻译。您可以通过设置 RecaptchaOptions
的 lang 参数来使用这些内容:
<script type="text/javascript"> var RecaptchaOptions = { lang : 'fr', }; </script>
自定义翻译
如果没有适合您所用语言的翻译版本,您可以自行构建。您需要翻译 recaptchaOptions 中的所有字符串,并设置 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 字典中设置以下字段:
键 |
可能的值 |
默认值 |
含义 |
||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
主题 |
'红色' | '白色' | '黑色玻璃' | '清洁' | '自定义' |
“红色” |
定义要用于 reCAPTCHA 的主题。红色、白色、黑色和干净的主题背景是 reCAPTCHA 提供界面的预定义主题。在自定义主题中,您的网站可以完全控制 reCAPTCHA 的外观。 |
||||||||||||||||||
语言 |
任何支持的语言代码。 |
“zh-CN” |
预定义的主题在界面中使用哪种语言。支持以下语言:
|
||||||||||||||||||
custom_translations | 翻译字典 | null | 使用此方法可指定 reCAPTCHA 字符串的自定义翻译。 | ||||||||||||||||||
custom_theme_widget | 包含 DOM 元素 ID 的字符串 | null | 使用自定义主题时,这是一个包含微件的 div 元素。如需了解如何使用,请参阅“自定义主题”部分。 | ||||||||||||||||||
标签页索引 |
任意整数 |
0 |
为 reCAPTCHA 文本框设置 tabindex。如果表单中的其他元素使用 tabindex,则应设置该值,以便用户更轻松地进行导航 |
例如,以下脚本标记使 reCAPTCHA 具有白色主题,并且 tabindex 为 2:
<script> var RecaptchaOptions = { theme : 'white', tabindex : 2 }; </script>