Ответы пользователя по тегу Google Translate
  • Какой существует скрипт для перевода страницы с русского на английский?

    @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="ваш стиль">Стили будут полностью заменены на то, что вставит скрипт.


    ฅ^•ﻌ•^ฅ
    Ответ написан
    Комментировать