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

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

irbees2008 irbees2008 Опубликовано - 20 - сентября Онлайн сервисы
1579 - 0
  • Адаптировал: 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>
лишние флаги можете удалить, или добавить свои .
Все пользуемся .

Можешь почитать и вот эту статейку "Вывод изображения через плагин xfields"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

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

Теги

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

Статистика

  • Caйту: 3950 дней
  • Новостей: 564
  • Комменты: 254
  • Зарегистрированно : 633
  • Онлайн всего: [3]
  • Гости: [2]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Яндекс, dankeanke, Google
  • SQL запросов: 30
  • Генерация страницы: 0.356сек
  • Потребление памяти: 5.184 Mb 
  •   Яндекс.Метрика