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

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

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

  • можно сделать копию сайта в разных папках 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 — функция обратного вызова. Если требуется использовать пользовательский код, который бы выполнялся при каждой смене языка, то можно смело ею пользоваться.

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