如何添加触发翻译的Google翻译链接？ [英] How to add Google Translate link that triggers translation?
问题描述
我有一个保加利亚语网页，我希望我的用户能够一键翻译成英文。当用户进入页面时，页面顶部不应该有任何翻译横幅（可以在用户点击翻译链接后）。我曾尝试使用 #googtrans（bg | en）（ doc ）但它不起作用，由于此代码，它在页面顶部显示一个横幅：
I have a web page in Bulgarian and I want my users be able to translate it one-click to English. Also there should not be any translation banner at the top of the page when a user enters to the page (it can after the user clicks the translation link). I have tried to use #googtrans(bg|en) (doc) but it didn't work, also it shows a banner at the top of the page due to this code:
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'bg',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
（ doc ）
代码在这里 krumovgrad。 eu 点击右上角的标志。
the code is here krumovgrad.eu click the flags at the right top.
推荐答案
我前几天遇到了同样的问题并且出现了有一个有效的解决方案。我有一个西班牙语网站，在我们将其翻译成英文之前，我们为用户提供使用Google网站翻译的可能性。当用户单击en English flag时，它会打开一个Twitter Bootstrap模式，告诉用户该网站尚未翻译，并且有一个按钮可以单击以触发翻译。我使用JavaScript捕获事件，使用值'/ es / en'设置cookie'googtrans'并重新加载页面。谷歌的脚本完成剩下的工作。重新加载后，我检查cookie是否存在并更改西班牙国旗的英文标志。当用户点击它时，我将cookie设置为''（空字符串），然后重新加载页面。
I had the same issue a few days ago and came up with a solution that works. I have a site in Spanish, and until we translate it into English, we offer our users the possibility of using Google Website Translator. When users click en English flag, it opens a Twitter Bootstrap modal telling the user the website hasn't been translated yet, and there's a button they can click to trigger the translation. I capture the event with JavaScript, set the cookie 'googtrans' with the value '/es/en' and reload the page. The Google's script does the rest. After the reload, I check if the cookie exists and change the English flag for the Spanish flag. When the user clicks on it, I set the cookie to '' (empty string), and reload the page.
为简单起见，我不会包含Bootstrap模态部分。
For simplicity's sake, I won't include the Bootstrap modal part.
<!DOCTYPE html>
<html>
<head>
(...)
<meta name="google-translate-customization" content="(YOUR_TRANSLATE_CUSTOMIZATION_ID)" />
(...)
</head>
<body>
(...)
<a id="lang-change-en" class="lang-change" href="javascript:void(0);">
<img src="images/en-flag.png" alt="English Flag">
</a>
(...)
<script src="js/script.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
Javascript（script.js）
Javascript (script.js)
function setCookie(cname, cvalue, exdays) {
var expires;
if (exdays === 0) {
expires = '';
} else {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
expires = "expires=" + d.toGMTString();
}
var domain = (typeof domain === "undefined") ? '' : "; domain="+domain;
document.cookie = cname + "=" + cvalue + "; " + expires + "path=" + path + domain;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
//Google provides this function
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es',
includedLanguages: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false
},'google_translate_element');
}
//Using jQuery
$(document).ready(function() {
$(document).on('click','#lang-change-en', function() {
setCookie('googtrans', '/es/en', 0, '.viajoasalta.com');
setCookie('googtrans', '', 0, '/');
location.reload();
});
$(document).on('click', '#lang-change-es', function() {
setCookie('googtrans', '', 0, '/', '.viajoasalta.com');
setCookie('googtrans', '', 0, '/');
location.reload();
});
var googTrans = getCookie('googtrans');
if (googTrans === '/es/en') {
var src = $('#lang-change-en > img').attr('src').replace('en-flag', 'es-flag');
$('#lang-change-en > img').attr('src', src);
$('#lang-change-en').attr('id', 'lang-change-es');
}
});
在网站翻译设置向导中，您可以选择要在列表中显示的语言。然后，您可以拥有自己的< select> ，其中每个< option> 都有 value 它应具有的cookie值，或带有 data-cookie =value等标志的普通列表。然后使用JavaScript捕获列表的'change'事件（对于select）或'click'事件，并适当地设置cookie。
In the Website Translator setup wizard, you can select the languages you want to appear in the list. You then can have your own <select> where each <option> has as the value the value of the cookie it should have, or an ordinary list with flags with something like data-cookie="value". Then with JavaScript you capture the 'change' event (for the select) or the 'click' event for the list, and set the cookie appropriately.
注意：我故意删除了网站翻译器呈现的div：
Note: I intentionally removed the div where the Website Translator gets rendered:
<div id="google_translate_element"></div>
要查看它的工作原理，您可以访问 www.viajoasalta.com ;至少在我们最终翻译它之前。
To see it working, you can visit www.viajoasalta.com; at least until we finally translate it.
这篇关于如何添加触发翻译的Google翻译链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
