Каждому разработчику сайта приходилось иметь дело с локализацией сайта, чтобы каждый пользователь, когда заходит на страницу, сайт автоматически перенаправлял его на ту версию языка, на котором привык общаться клиент. Есть много способов это сделать:
- можно сделать копию сайта в разных папках 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 — плагин
Для этого нужно создавать или добавлять классы к тегам, в которых есть содержимое, требующий перевода. Названия глассов соответствуют названиям переменных в языковых картов, например для переменно «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 — функция обратного вызова. Если требуется использовать пользовательский код, который бы выполнялся при каждой смене языка, то можно смело ею пользоваться.
Это все, описание окончено. Удачного пользования!