Как добавить ссылку Google Translate, которая запускает перевод? - PullRequest
Новая
       8

Как добавить ссылку Google Translate, которая запускает перевод?

6 голосов
/ 30 ноября 2011

У меня есть веб-страница на болгарском языке, и я хочу, чтобы мои пользователи могли перевести ее одним щелчком мыши на английский. Кроме того, не должно быть никакого баннера перевода в верхней части страницы, когда пользователь заходит на страницу (это может быть после того, как пользователь щелкнет ссылку перевода). Я пытался использовать #googtrans(bg|en) ( doc ), но это не сработало, а также показывает баннер вверху страницы из-за этого кода: 

<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>

( документ )

код здесь krumovgrad.eu нажмите на флажки справа вверху.

Ответы [ 2 ]

9 голосов
/ 23 марта 2014

У меня была такая же проблема несколько дней назад, и я нашел решение, которое работает. У меня есть сайт на испанском языке, и пока мы не переведем его на английский, мы предлагаем нашим пользователям возможность использовать Google Website Translator. Когда пользователи нажимают на флаге на английском языке, он открывает модал Twitter Bootstrap, сообщающий пользователю, что веб-сайт еще не переведен, и есть кнопка, которую можно нажать, чтобы вызвать перевод. Я фиксирую событие с помощью JavaScript, устанавливаю cookie «googtrans» со значением «/ es / en» и перезагружаю страницу. Скрипт Google делает все остальное. После перезагрузки я проверяю, существует ли файл cookie, и меняю английский флаг на испанский. Когда пользователь нажимает на него, я устанавливаю cookie на '' (пустая строка) и перезагружаю страницу.

Для простоты я не буду включать модальную часть Bootstrap.

Html 

<!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) 

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' (для выбора) или событие 'click' для списка и соответственно устанавливаете cookie.

Примечание. Я намеренно удалил div, в котором переводчик веб-сайта отображается: 

<div id="google_translate_element"></div>

Чтобы увидеть, как это работает, вы можете посетить www.viajoasalta.com ; по крайней мере, пока мы наконец не переведем это.

1 голос
/ 30 ноября 2011

Гугл подумал, впереди мой друг. Пожалуйста, посмотрите на эту страницу: http://translate.google.com/translate_tools

РЕДАКТИРОВАТЬ: Извините, я только что понял, что вы используете то, что предоставляет страница! Вы можете, с помощью простого javascript, скрыть отображаемые элементы и создать ссылку для английского языка, где onClick изменяет значение скрытого элемента select ... и вся ваша страница переводится.

Это немного грязно, но это делает работу, и пользователь не знает, что она существует!

Можно также рассмотреть возможность захвата запроса, отправляемого на серверы Google Translate, и захватить ссылку, которая вызывается, когда вы выбираете английский язык и просто используете эту ссылку.

В Chrome есть хорошая утилита для захвата запросов (см. Ctrl + shift + j для консоли разработчика)

...