Quber
@Quber
PHP Team lead

Какой существует скрипт для перевода страницы с русского на английский?

Раньше существовал jquery плагин для сайта, который одним нажатием клавиши мог делать перевод страницы на лету на любой язык. Мне необходимо реализовать мультиязычность на сайте, и подобный плагин был бы кстати, имея ввиду его простоту подключения и минимальные трудозатраты на её (мультиязычность) реализацию.

Насколько я знаю, Google Translate API стал платным. Поддержка и работа такого плагина остановились. Существует вроде аналог Bing Translate API. Но мне нужен сам js скрипт. Есть ли такие в природе? Перевод должен осуществляться без перехода на сторонние сайты.

Спасибо.
  • Вопрос задан
  • 18133 просмотра
Пригласить эксперта
Ответы на вопрос 5
@Azerlund6214
Делаю этот ответ для будущих поколений.

Буквально только что успешно прикрутил GTApi к сайту, выкладываю что да как.

На момент 010920 GTApi официально перестали распространять, однако оставили уже работающим сайтам возможность его использовать.
Текст с их сайта

https://translate.google.com/intl/en/about/website/

Мы больше не предоставляем новый доступ к Переводчику веб-сайтов Google Translate. Это изменение не влияет на существующее использование Переводчика веб-сайтов.
Мы рекомендуем пользователям, которые хотят переводить веб-страницы, использовать браузеры, которые изначально поддерживают перевод.
====
We no longer provide new access to Google Translate's Website Translator. This change does not affect existing use of the Website Translator.
We encourage users looking to translate webpages to use browsers that support translation natively.


Ожидаемый результат от гайда ниже:
  • Простенький список с флагами + названиями языков. (Кастомизируйте уже сами)
  • При клике вся страница переводится на нужный язык. Без перезагрузок и прочего.
  • Выбранный язык сохраняется в куки, поэтому все другие страницы будут тоже автоматически переводиться.
  • Можно сделать возможность выбора языка например только на лендинге и не делать на других страницах.


Подключение:

1) Копипастим в отдельный .js файл этот код:
JS Код для копипаста
(function() {
    var d = "text/javascript"
      , e = "text/css"
      , f = "stylesheet"
      , g = "script"
      , h = "link"
      , k = "head"
      , l = "complete"
      , m = "UTF-8"
      , n = ".";

    function p(b) {
        var a = document.getElementsByTagName(k)[0];
        a || (a = document.body.parentNode.appendChild(document.createElement(k)));
        a.appendChild(b)
    }


    
    function _loadJs(b) {
        var a = document.createElement(g);
        a.type = d;
        a.charset = m;
        a.src = b;
        p(a)
    }


    function _loadCss(b) {
        var a = document.createElement(h);
        a.type = e;
        a.rel = f;
        a.charset = m;
        a.href = b;
        p(a)
    }

    function _isNS(b) {
        b = b.split(n);
        for (var a = window, c = 0; c < b.length; ++c)
            if (!(a = a[b[c]]))
                return !1;
        return !0
    }

    function _setupNS(b) {
        b = b.split(n);
        for (var a = window, c = 0; c < b.length; ++c)
            a.hasOwnProperty ? a.hasOwnProperty(b[c]) ? a = a[b[c]] : a = a[b[c]] = {} : a = a[b[c]] || (a[b[c]] = {});
        return a
    }

    window.addEventListener && "undefined" == typeof document.readyState && window.addEventListener("DOMContentLoaded", function() {
        document.readyState = l
    }, !1);

    if (_isNS('google.translate.Element')) {
        return
    }



    (function() {
        var c = _setupNS('google.translate._const');
        c._cl = 'ru';
        c._cuc = 'googleTranslateElementInit';
        c._cac = '';
        c._cam = '';
        c._ctkk = eval('((function(){var a\x3d71640675;var b\x3d-12312877;return 406476+\x27.\x27+(a+b)})())');
        var h = 'translate.googleapis.com';
        var s = (true ? 'https' : window.location.protocol == 'https:' ? 'https' : 'http') + '://';
        var b = s + h;
        c._pah = h;
        c._pas = s;
        c._pbi = b + '/translate_static/img/te_bk.gif';
        c._pci = b + '/translate_static/img/te_ctrl3.gif';
        c._pli = b + '/translate_static/img/loading.gif';
        c._plla = h + '/translate_a/l';
        c._pmi = b + '/translate_static/img/mini_google.png';
        c._ps = b + '/translate_static/css/translateelement.css';
        c._puh = 'translate.google.com';
        _loadCss(c._ps);
        _loadJs(b + '/translate_static/js/element/main_ru.js');
    })();
})();





	var cookie = get_cookie( 'googtrans' );
	if (cookie == null) {
		$('.translate .lang_ru').addClass('active')
	}else{
		var get_cook = cookie.split('/')[2];
		$('.translate .lang_'+get_cook).addClass('active');
	}

	function doGTranslate(lang_pair) {

		$('.translate li').click(function () {
			$('.translate li').removeClass('active');
			$(this).addClass('active');
			return false;
		});

		if (lang_pair.value)
			lang_pair = lang_pair.value;
	//	if (lang_pair == '')
	//		return;

		var lang = lang_pair.split('|')[1];
		var teCombo;
		var sel = document.getElementsByTagName('select');
		for (var i = 0; i < sel.length; i++)
			if (sel[i].className == 'goog-te-combo')
				teCombo = sel[i];

		if (document.getElementById('google_translate_element') == null  || document.getElementById('google_translate_element').innerHTML.length == 0 || teCombo.length == 0 || teCombo.innerHTML.length == 0) {
			setTimeout(function() {
				doGTranslate(lang_pair)
			}
			, 500);

		}
		else {
			teCombo.value = lang;
			GTranslateFireEvent(teCombo, 'change')
		}
	};

	function GTranslateFireEvent(element, event) {
		try {
			if (document.createEventObject) {
				var evt = document.createEventObject();
				element.fireEvent('on' + event, evt)
			}
			else {
				var evt = document.createEvent('HTMLEvents');
				evt.initEvent(event, true, true);
				element.dispatchEvent(evt)
			}
		}
		catch (e) {}
	};



function get_cookie ( cookie_name ) {
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );

  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}

	function googleTranslateElementInit() {
		new google.translate.TranslateElement({
			pageLanguage: 'ru'
		},'google_translate_element');
	};



2) Подключаем это в хедере на каждой странице:
<script src=".../Код_выше.js"></script>
<style type="text/css">
    body { top: 0px !important; } /* Убираем отступ который выставляет скрипт */
    .skiptranslate { display: none !important; } /* Скрываем гугловский навбар с выбором языка  */
</style>


Это вставляем в самый верх body. Обязательно нужно для переводчика, без этого элемента ничего не заработает.
Подключать на каждой странице.
<div id="google_translate_element"></div>

3) Делаем простейшее оформление.

<ul class="translate">

     <li class="">
              <a href="#" onclick="doGTranslate('ru|en');"> <!-- Переводим сайт с русского на английский -->
              <img height="20" width="30"
                    alt="Флаг страны 1"
                   src="Папка с флагами\флаг1.png">
              <span>
                    Язык 1
              </span>
          </a>
      </li>

</ul>


Готовый код для шаблонизатора blade, с выводом всех флагов в цикле
<div id="languages-boxes">

            @php
            $langFrom = 'en'; # С какого языка переводим. (Исходный язык сайта)
            $langFlagsImgFolder = 'public\\Flags'; # Путь к папке с флагами.

            $langsSettings = array(
                [ 'GTLangName'      => 'en',   # Имя языка в GoogleTranslate
                  'img-alt'         => 'Eng',  # Alt для флага
                  'image-flag-name' => 'gb',   # Имя файла с флагом.  ...\000.png
                  'text'            => 'English', ],  # Подпись рядом с флагом

                [ 'GTLangName'        => 'fr',
                    'img-alt'         => 'Franc',
                    'image-flag-name' => 'fr',
                    'text'            => 'French', ],

                [ 'GTLangName'        => 'de',
                    'img-alt'         => 'Germ',
                    'image-flag-name' => 'de',
                    'text'            => 'German', ],

                [ 'GTLangName'        => 'it',
                    'img-alt'         => 'Ital',
                    'image-flag-name' => 'it',
                    'text'            => 'Italian', ],

                [ 'GTLangName'        => 'ru',
                    'img-alt'         => 'Rus',
                    'image-flag-name' => 'ru',
                    'text'            => 'Russian.', ],
            );
            @endphp

            {{-- Тут любой внешний вид верстки --}}
            <ul class="translate">

                @foreach( $langsSettings as $oneLang )

                <li>
                    <a href="#" onclick="doGTranslate('{{$langFrom}}|{{$oneLang['GTLangName']}}');">

                        <img height="20" width="30"
                             alt="{{$oneLang['img-alt']}}"
                             src="{{$langFlagsImgFolder}}\{{$oneLang['image-flag-name']}}.png">

                        <span>
                           {{$oneLang['text']}}
                        </span>

                    </a>
                </li>
                @endforeach

            </ul>


        </div>


Скачать все флаги одним архивом можно тут

Результат:
5f4e475def963194533869.jpeg

Минусы и важные подводные камни:
  • Сразу после подключения js в хедере, под ним автоматически подключатся еще 3 файла.
  • + Вверху body подключатся 2 div'a.
  • + Внизу body подключатся 2 div + 2 iframe.
  • Все переводимые тексты будут оборачиваться в двойной тег font.
  • Мы скрыли гугловский навбар, но по факту он никуда не делся - Мы не видим, а он есть.
  • Самое главное: переписываются стили тегов html и body. То есть в записи <body style="ваш стиль">Стили будут полностью заменены на то, что вставит скрипт.


ฅ^•ﻌ•^ฅ
Ответ написан
Комментировать
Насчет платности GTApi не слышал, по крайней мере заявок об этом у них не написано:
translate.google.com/manager/website/add?hl=ru

делаешь настройку, получаешь код, ничего сложного...
Ответ написан
@ru_janex
gogle translate позволяет делать так
sustec.ru (в футере посмотри)
Ответ написан
minskstay.by моя реализация в подвале, пока работает. языковую принадлежность не определяем, по умолчанию выбор языка был при авторизации, но от неё отказались, хоть она была и необязательна совсем. Поэтому остался только в подвале переводчик.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
25 нояб. 2024, в 15:52
3000 руб./за проект
25 нояб. 2024, в 15:43
1500 руб./за проект