LangZilla — интерактивный переводчик для сайта

Каждому разработчику сайта приходилось иметь дело с локализацией сайта, чтобы каждый пользователь, когда заходит на страницу, сайт автоматически перенаправлял его на ту версию языка, на котором привык общаться клиент. Есть много способов это сделать:

  • можно сделать копию сайта в разных папках www.domen.com/ru и www.domen.com/en и т.д.;
  • можно использовать api переводчика от Google Translate;
  • можно использовать код на JavaScript и определять страну и язык самостоятельно при помощи свойства window.navigator.languages на JavaScript;
  • наконец, можно использовать готовое и быстрое решение — LangZilla.

Описание

LangZilla — это бесплатный JavaScript автопереводчик сайтов, с возможностью расширять языковую базу при помощи языковых файлов.

Что может LangZilla? Вот ее функции:

  • автоматически определять страну клиента и дает ему его перевод;
  • возможность определять любой язык при помощи json — файлов;
  • возможность переводить внутри тегов HTML;
  • возможность переводить слова в атрибутах тегов;
  • возможность перевести часть текста внутри до содержимого в теге;
  • возможность перевести текст после содержимого в теге;
  • возможность запустить пользовательский кода, определив функцию обратного вызова;
  • возможность использовать в переводе теги HTML;
  • возможность определять собственные пути к картам перевода и определять для них иконки.

Использование

Чтобы быстро использовать плагин, необходимо скачать архив, в папке src будут все исходные файлы плагина:

  • папка loc содержит все файлы перевода, которые вы захотите добавить. Причем, имя файла должно соответствовать коду языка;
  • папка images содержит ресурсы плагина, такие как иконки языков и т.д.;
  • файл langzilla.js — основной файл плагина, его необходимо подключить к нашей странице, где требуется перевод.

Итак, давайте поподробнее. После разархивирования в корневую папку сайта подключаем  файлы jQuery и langzilla.js к той странице, на которой требуется перевод

 


<script src="js/jquery-2.1.4.min.js"></script>
<script src="src/langzilla.js"></script>

Далее нам необходимо создать карты языка в формате .json и переместить их в папке loc, откуда их будет читать наш плагин перевода. Название карты языка должно соответствовать кодовому определению языка в формате, который определен для свойства window.navigator.languages, данный формат языков для браузеров опеределен по стандарту RFC 4646. Примеры валидных языковых кодов включают «en», «EN-US», «FR«, «es-ES», «ru-RU» и т.д. Некоторые можно посмотреть здесь. После того, как языковую карту создали и дали ему валидное имя, соответствующее кодовому названию языка, нам необходимо написать код запуска с регистрированными языковыми картами. Простейший код будет выглядеть вот так:

jQuery(function(){
    $("body").createLang({//определяем тег, в которую добавятся кнокпки
        locals:{
            "en-US":"src/images/en.png",//подключаем и регистрируем для языка иконку кнопки
            "ru-RU":"src/images/ru.png"//подключаем и регистрируем для языка иконку кнопки
        },
        locPath: "src/loc/"//указываем путь к папке языковых карт
    });
});

Теперь нам необходимо заполнить языковые карты. Допустим мы создали языковые карты ru-RU.json для русского языка и en-US.json — для английского языка. Запись в языковых картах поизводиться в формате JSON, ниже представлены примеры заполнения для русского

{
    "lzTitle": "LangZilla|Русский",
    "lzMenuHome": "Главная",
    "lzMenuBlog": "Блог",
    "lzMenuGallery": "Галерея",
    "lzMenuAbout": "О нас",
    "lzMenuContact": "Контакты",
    "lzMenuItem1": "Проектируем для WEB и дизайн",
    "lzMenuItem2": "Проектируем для гаджетов",
    "lzMenuItem3": "Проектируем для ПК",
    "lzMenuItem4": "Проектируем для микроэлектроники",
    "lzTextAboutAppend": "Вы можете использовать и изменять наш плагин для личного и коммерческого использования.[:]append",
    "lzTextAboutPrepend": "Бесплатный плагин перевода от [:]prepend",
    "lzImageEnRU": "images/langzilla-ru.png[:]attr=src",
    "lzHeaderPopularPost": "Популярные посты",
    "lzHeaderCategories": "Категории",
    "lzHeadDef": "Заголовок текста",
    "lzHeadReadMore": "Читать далее",
    "lzHeadNext": "дальше"
    
}

и для английского

{
    "lzTitle": "LangZilla|English",
    "lzMenuHome": "Home",
    "lzMenuBlog": "Blog",
    "lzMenuGallery": "Gallery",
    "lzMenuAbout": "About",
    "lzMenuContact": "Contact",
    "lzMenuItem1": "We develop for WEB and Design",
    "lzMenuItem2": "We develop for Phones",
    "lzMenuItem3": "We develop for PC",
    "lzMenuItem4": "We develop for Microelectronic",
    "lzTextAboutAppend": "You can use and modify the our plugin for both personal and commercial use.[:]append",
    "lzTextAboutPrepend": "Free translate plugin by [:]prepend",
    "lzImageEnRU": "images/langzilla-en.png[:]attr=src",
    "lzHeaderPopularPost": "Popular Post",
    "lzHeaderCategories": "Categories",
    "lzHeadDef": "Text Heading",
    "lzHeadReadMore": "Read more",
    "lzHeadNext": "next"
}

Названия переменных «lzTitle», «lzMenuHome», «lzMenuBlog», … произвольные и они должны быть одинаковы во всех языковых картах, в данном случае, и для ru-RU.json и en-EN.json иначе вы не получите перевод.

Далее, нам необходимо заставить выполнить перевод по нажатии на кнопок, которые автоматически появятся, по умолчанию, в верхнем правом углу страницы, к которой подключен LangZilla — плагин

langzilla-btn-imgДля этого нужно создавать или добавлять классы к тегам, в которых есть содержимое, требующий перевода. Названия глассов соответствуют названиям переменных в языковых картов, например для переменно «lzMenuHome» класс будет написан как class = «lzMenuHome» и т.д. Пример этого показан ниже

<div class="menu">
	<ul>
		<li><a class="lzMenuHome" href="index.html"><!--Home--></a></li>
		<li><a class="lzMenuBlog" href="#"><!--Blog--></a></li>
		<li><a class="lzMenuGallery" href="#"><!--Gallery--></a></li>
		<li><a class="lzMenuAbout" href="#"><!--About--></a></li>
		<li><a class="lzMenuContact" href="#"><!--Contact--></a></li>
	</ul>
</div>

Готовый результат можно посмотреть на странице плагина.

Фильтры действий

Фильтры действий — это дополнительное указание для плагина как обработать данный текст перевода внутри тега. Все фильтры действий записываются после текста перевода через разделитель [:]. На данный момент существует следующий список фильтров действий:

  • [:]prepend — добавляет текст перевода перед содержимым внутри тега;
  • [:]append — добавляет текст перевода  после содержимого тега;
  • [:]html — добавляет текст перевода внутрь тега, удаляя содержимое. Данный фильтр применяется по умолчанию, если не указаны выше описанные фильтры принудительно;
  • [:]attr=attributeName — добавляет текст перевода в качестве значения атрибута;

Как вы заметили, данные фильтры идентичны с методами jQuery и выполняют похожие действия.

Дополнительные параметры LangZilla

LangZilla имеет дополнительные параметры для гибкой настройки. Ниже представлен весь список этих параметров:

  • position — определяет поведение кнопок на странице и соответствует CSS значениям position. По умолчанию кнопки находятся на верхнем правом углу и этот параметр установлен как «absolute»;
  • top — расстояние до кнопок с верхней части страницы в пикселях. По умолчанию равен 0;
  • right — расстояние до кнопок от правой стороны страницы. По умолчанию равен значению 80;
  • locals — параметр для регистрации языковых карт и определения для них кнопок. При использовании данный параметр должен быть определен;
  • locPath — путь к языковым картам относительно страницы, к которому подключен плагин. По умолчанию содержит значение «langzilla/loc/»;
  • callBack — функция обратного вызова. Если требуется использовать пользовательский код, который бы выполнялся при каждой смене языка, то можно смело ею пользоваться.

Это все, описание окончено. Удачного пользования!

 

Вам также может понравиться

Об авторе WebSofter

Web - технологии

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...