Мультиязычность для простых сайтов

Наиболее простой способ добавить языки для сайта - использование Javascript.

В HTML-документ, в области HEAD добавляем скрипт:

<script type="text/javascript">
let langs = ['ru', 'en'];
let lang = 'ru';
setLangStyles(lang);

function setStyles(styles) {
var elementId = '__lang_styles';
var element = document.getElementById(elementId);
if (element) {
element.remove();
}

let style = document.createElement('style');
style.id = elementId;
style.type = 'text/css';

if (style.styleSheet) {
style.styleSheet.cssText = styles;
} else {
style.appendChild(document.createTextNode(styles));
}
document.getElementsByTagName('head')[0].appendChild(style);
}

function setLang(lang) {
setLangStyles(lang);
}

function setLangStyles(lang) {
let styles = langs
.filter(function (l) {
return l != lang;
})
.map(function (l) {
return ':lang('+ l +') { display: none; }';
})
.join(' ');

setStyles(styles);
}
</script>

На сайт (обычно в шапку страницы) добавляем ссылки смены языка. Например,

<a href="#" hreflang="en" onclick="setLang('en'); return false">Switch to english</a>
<a href="#" hreflang="ru" onclick="setLang('ru'); return false">Переключить на русский</a>

И последний шаг, добавить тексты на нужных языках, промаркировав их аттрибутом lang с указанием названия языка. Пример:

<p lang="ru">Текст на русском</p>
<p lang="en">English text</p>

Добавить комментарий

Ваш e-mail не будет опубликован.

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой: