translate api
Note: For this tutorial, I'm using version1 of the Google Translate API. A newer REST-based version is available.
注意：在本教程中，我使用的是Google Translate API的版本1。 提供了较新的基于REST的版本。
In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be done before the user sees anything on the page). In the real world, most small businesses can't afford to invest money into website translation. Luckily a small startup named "Google" provides an outstanding Translate API to translate simple text from one language to another!
在理想的世界中，所有网站都将具有允许用户将网站翻译成其母语的功能(或更理想的是，翻译将在用户看到页面上的任何内容之前完成)。 在现实世界中，大多数小型企业买不起网站翻译的资金。 幸运的是，一家名为“ Google”的小型创业公司提供了出色的Translate API ，可将简单文本从一种语言翻译成另一种语言！
范例HTML (Sample HTML)
Google's awesome Translate API allows you to send HTML -- you don't need to extract the text yourself! That's a huge feature because parsing HTML and putting it all back again would be a nightmare! Let's put together some sample content:
Google强大的Translate API允许您发送HTML，而您无需自己提取文本！ 这是一个巨大的功能，因为解析HTML并将其放回原处将是一场噩梦！ 让我们汇总一些示例内容：
<script src="https://www.google.com/jsapi?key=YOUR_GOOGLE_KEY"></script>
<div id="languages"><p>
<a href="?lang=en" rel="en">English</a> / <a href="?lang=es" rel="es">Spanish</a> / <a href="?lang=it" rel="it">Italian</a> /
<a href="?lang=fr" rel="fr">French</a>
</p></div>
<div id="languageBlock">
<p>Lights go out and I can't be saved <br />
Tides that I tried to swim against <br />
Brought me down upon my knees <br />
Oh I beg, I beg and plead </p>
<p>Singin', come out if things aren't said <br />
Shoot an apple off my head <br />
And a, trouble that can't be named <br />
Tigers waitin' to be tamed </p>
<p>Singing, yooooooooooooo ohhhhhh <br />
Yoooooooooooo ohhhhhh </p>
<p>Home, home, where I wanted to go <br />
Home, home, where I wanted to go <br />
Home, home, where I wanted to go <br />
Home, home, where I wanted to go</p>
</div>
We will use this #languageBlock element to send to Google for translation. Note that each link has a rel attribute which holds the code for the language to switch to.
我们将使用此#languageBlock元素将其发送给Google进行翻译。 请注意，每个链接都有一个rel属性，其中包含要切换到的语言的代码。
Google翻译API JavaScript (Google Translate API JavaScript)
For the sake of keeping the code short, I'm using MooTools to access elements and add DOM events. Feel free to stick to simple JavaScript or your framework of choice.
为了使代码简短，我使用MooTools访问元素并添加DOM事件。 随时坚持使用简单JavaScript或您选择的框架。
// Set the original/default language
var lang = "en";
var currentClass = "currentLang";
// Load the language lib
google.load("language",1);
// When the DOM is ready....
window.addEvent("domready",function(){
// Retrieve the DIV to be translated.
var translateDiv = document.id("languageBlock");
// Define a function to switch from the currentlanguage to another
var callback = function(result) {
if(result.translation) {
translateDiv.set("html",result.translation);
}
};
// Add a click listener to update the DIV
$$("#languages a").addEvent("click",function(e) {
// Stop the event
if(e) e.stop();
// Get the "to" language
var toLang = this.get("rel");
// Set the translation into motion
google.language.translate(translateDiv.get("html"),lang,toLang,callback);
// Set the new language
lang = toLang;
// Add class to current
this.getSiblings().removeClass(currentClass);
this.addClass(currentClass);
});
});
The first step in the process is using google.load to load the Translate API. When the the API is loaded, we grab the DIV to be translated. We then define a callback for when the translation returns from Google. This callback simply updates the content of the DIV. The last step is adding a click event handler to each language link. A google.language.translate call sends the content to Google for translation. When the translated content returns, the content is updated by our callback!
该过程的第一步是使用google.load加载Translate API。 加载API后，我们将抓取要转换的DIV。 然后，我们为翻译从Google返回时定义一个回调。 该回调仅更新DIV的内容。 最后一步是将click事件处理程序添加到每种语言链接。 google.language.translate调用会将内容发送给Google进行翻译。 当翻译的内容返回时，该内容将通过我们的回调进行更新！
Thanks to Google's Translate API, we can effortlessly translate data! It's important that I note that Google's content size limit is quite small so you shouldn't rely on the Translate API to completely translate your a page. It is, however, an excellent way to translate an alert or status message in a give language!
借助Google的Translate API，我们可以轻松转换数据！ 请务必注意，Google的内容大小限制非常小，因此您不应该依赖Translate API来完全翻译您的页面。 但是，这是一种以给定语言翻译警报或状态消息的好方法！
translate api