添加谷歌翻译到你的网站
Google翻译是Google在2006年退出的翻译服务。如果你使用Chrome浏览器的话，会发现在导航栏有翻译的小按钮！目前Google浏览器提供109种语言之间的即时翻译。它支持文字，语句和网页的翻译！如果你想使用Google翻译的话，你可以尝试访问translate.google.com)来使用!
不过本文想讨论的问题是如何在一个网站种应用Google翻译，相信前端同学都听过i18n,i18n是internationalization 的缩写，是指国际化！像vue种，我们就会使用vue-i18n来进行多语言的配置。这种做法的好处，就是准确，事先翻译好内容，根据用户的选择来确定不同的语言。不够，如果你要适配的语言很多，那岂不是要消耗很大的人工去进行翻译。既然提到了Google翻译，那我们是不是就可以使用Google翻译来翻译我们的网页！
要使用 google translate 脚本，您需要使用 和 导入包含函数googleTranslateElementInit()的google api 。new google.translate.TranslateElement()``google_translate_element id
Step 1: 设置 Google Translate API 的 CDN 路径。此路径将在您的页面上添加 Translator 的脚本。
<script
type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
></script>
Step 2: 添加一个<div>元素id=google_translate_element。它是 google 脚本中的预定义 ID。Translator API 将使用此 div 元素为用户提供语言列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Google Translate</title>
</head>
<body>
<h1>Your Web Page</h1>
<div id="google_translate_element"></div>
</body>
</html>
Step 3：添加脚本以选择网页的默认语言。每种语言在 Translator 中都有一个唯一的代码，您可以从此处查看列表。我们默认选择了美式英语，代码是'en'.
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
}
</script>
基于上面的三步，我们就完整的实现了一个支持多语言的网站了！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Google Translate</title>
</head>
<body>
<h2>Your Web Page</h2>
<p>Click on the dropdown button to translate.</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<p>You can translate the content of this page by selecting a language in the select box.</p>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
}
</script>
<script
type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
></script>
</body>
</html>
Output
我使用这种方法将我的MiroTalk SFU和MiroTalk P2P升级成支持133种语言的WEB!而且在这过程中，我并没有耗费多少人工！
PS：如果你需要的是准确度，那你最好还是使用人工翻译！机器翻译远远无法理解人类的表达！
- 点赞
- 收藏
- 关注作者
评论（0）