Хаки и Скрипты Next Generation CMS

Виджет переводчика от гугла

irbees2008 irbees2008 Опубликовано - 20 - сентября Онлайн сервисы
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Всем привет. Сегодня рассмотрим виджет перевода страницы от гугла. Как уже многие знаете Гугл перекрыл доступ к переводчику сайтов , вот сообщение которое выводится

Цитата:
Получить доступ к переводчику сайтов больше нельзя. Это никак не отразится на тех, кто уже установил соответствующий плагин.
Советуем пользователям переводить веб-страницы с помощью браузеров, имеющих встроенную функцию перевода.
Главное, плагин все также остается рабочим и мы можем им пользоваться.
Как будет выглядеть наш пример:
_pl61jqw1ia7w2r7at13fdzwqre.gif (10.83 Kb)

Разметка демо-страницы
Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Кастомный виджет googleTranslate для сайта</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="js/google-translate.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script>
</head>
<body class="page page_fix">
<div class="language">
<img src="images/lang/lang__ru.png" alt="ru" data-google-lang="ru" class="language__img">
<img src="images/lang/lang__en.png" alt="en" data-google-lang="en" class="language__img">
<img src="images/lang/lang__de.png" alt="de" data-google-lang="de" class="language__img">
<img src="images/lang/lang__fr.png" alt="fr" data-google-lang="fr" class="language__img">
<img src="images/lang/lang__pt.png" alt="pt" data-google-lang="pt" class="language__img">
</div>
<section class="content">
<h1 class="content__title">Машинный перевод сайта</h1>
<div class="content__desc">
<p>Перевод сайта на другие языки при помощи Google Translate Widget</p>
<p>Пример кастомоного виджета</p>
<p>Hello Мир!!!</p>
</div>
</section>
</body>
</html>

Для корректной работы нашего кастомного виджета необходимо подключить файлы:
Код:
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="js/google-translate.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script>

Содержимое style.css:
Код:
body {
margin: 0;
padding: 0;
}

.page {
display: flex;
min-height: 100vh;
}

/* Фиксируем позицию body, которую меняет панель гугла*/

.page_fix {
top: 0 !important;
position: static !important;
}

/* Прячем панель гугла */

.skiptranslate {
display: none !important;
}

/* language */

.language {
position: fixed;
left: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
}

.language__img {
margin: 2px;
cursor: pointer;
opacity: .5;
}

.language__img:hover,
.language__img_active {
opacity: 1;
}

/* content */

.content {
text-align: center;
margin: auto;
}

Используемые флаги:
lang__ru.png (899 b)lang__fr.png (286 b)lang__ar.png (1.19 Kb)lang__zh.png (1.28 Kb)lang__it.png (1.31 Kb)

Разметка кастомного виджета:
Код:
<div class="language">
<img src="images/lang/lang__ru.png" alt="ru" data-google-lang="ru" class="language__img">
<img src="images/lang/lang__en.png" alt="en" data-google-lang="en" class="language__img">
<img src="images/lang/lang__de.png" alt="de" data-google-lang="de" class="language__img">
<img src="images/lang/lang__fr.png" alt="fr" data-google-lang="fr" class="language__img">
<img src="images/lang/lang__pt.png" alt="pt" data-google-lang="pt" class="language__img">
</div>

Содержимое google-translate.js:
Код:
const googleTranslateConfig = {
lang: "ru",
};

function TranslateInit() {

let code = TranslateGetCode();
// Находим флаг с выбранным языком для перевода и добавляем к нему активный класс
$('[data-google-lang="' + code + '"]').addClass('language__img_active');

if (code == googleTranslateConfig.lang) {
// Если язык по умолчанию, совпадает с языком на который переводим
// То очищаем куки
TranslateClearCookie();
}

// Инициализируем виджет с языком по умолчанию
new google.translate.TranslateElement({
pageLanguage: googleTranslateConfig.lang,
});

// Вешаем событие клик на флаги
$('[data-google-lang]').click(function () {
TranslateSetCookie($(this).attr("data-google-lang"))
// Перезагружаем страницу
window.location.reload();
});
}

function TranslateGetCode() {
// Если куки нет, то передаем дефолтный язык
let lang = ($.cookie('googtrans') != undefined && $.cookie('googtrans') != "null") ? $.cookie('googtrans') : googleTranslateConfig.lang;
return lang.substr(-2);
}

function TranslateClearCookie() {
$.cookie('googtrans', null);
$.cookie("googtrans", null, {
domain: "." + document.domain,
});
}

function TranslateSetCookie(code) {
// Записываем куки /язык_который_переводим/язык_на_который_переводим
$.cookie('googtrans', "/auto/" + code);
$.cookie("googtrans", "/auto/" + code, {
domain: "." + document.domain,
});
}

При смене языка добавляется куки с ключом googtrans и значением вида /ru/en
  • /ru — это язык который переводим
  • /en — это язык на который переводим

Атрибут data-google-lang в куки записываются соответствующие значение вида /auto/выбранный_язык. Затем происходит перезагрузка и auto заменяется на язык записанный отдельно в конфиг:
Код:
const googleTranslateConfig = {
lang: "ru",
};
Это сделано для того, чтобы мы не привязывались к одному языку. Если к примеру сайт переведен на 2 языка, русский и английски, то мы можем передать текущий язык в конфиг и правильно обработать его. Все доступные языки и их код стандарта ISO-639-1 можно найти тут.

Функции добавления и очисти куки вынесено отдельно, чтобы была возможность провести дополнительные проверки и вызвать в других местах.

И так подключаем .
1. Скачиваем архив translait.zip
2. заливаем флаги нужные нам из папки images в папку с изображениями вашего шаблона
3. заливаем скрипты google-translate.js в папку js вашего шаблона
4. заливаем стили google-translate.css в папку css вашего шаблона
5. открываем main.tpl вашего шаблона и в секцию head подключаем стили и скрипты
Код:
<link rel="stylesheet" href="{{ tpl_url }}/css/google-translate.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="{{ tpl_url }}/js/google-translate.js"></script>
если у вас не подключен jquery.min.js то надо подключить иначе виджет работать не будет.
6. В body добавляем
Код:
<div class="language">
<img src="{{ tpl_url }}/images/lang__ru.png" alt="ru" data-google-lang="ru" class="language__img">
<img src="{{ tpl_url }}/images/lang__en.png" alt="en" data-google-lang="en" class="language__img">
<img src="{{ tpl_url }}/images/lang__de.png" alt="de" data-google-lang="de" class="language__img">
<img src="{{ tpl_url }}/images/lang__fr.png" alt="fr" data-google-lang="fr" class="language__img">
<img src="{{ tpl_url }}/images/lang__pt.png" alt="pt" data-google-lang="pt" class="language__img">
<img src="{{ tpl_url }}/images/lang__es.png" alt="es" data-google-lang="es" class="language__img">
<img src="{{ tpl_url }}/images/lang__it.png" alt="it" data-google-lang="it" class="language__img">
<img src="{{ tpl_url }}/images/lang__zh.png" alt="zh" data-google-lang="zh-CN" class="language__img">
<img src="{{ tpl_url }}/images/lang__ar.png" alt="ar" data-google-lang="ar" class="language__img">
<img src="{{ tpl_url }}/images/lang__nl.png" alt="nl" data-google-lang="nl" class="language__img">
<img src="{{ tpl_url }}/images/lang__sv.png" alt="sv" data-google-lang="sv" class="language__img">
</div>
лишние флаги можете удалить, или добавить свои .
Все пользуемся .

Можешь почитать и вот эту статейку "Стильные кнопки-переключатели при помощи CSS3"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3481 день
  • Новостей: 555
  • Комменты: 254
  • Зарегистрированно : 585
  • Онлайн всего: [4]
  • Гости: [4]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.465сек
  • Потребление памяти: 5.188 Mb 
  •   яндекс.ћетрика