Я могу предложить простое решение на основе localStorage.Давайте посмотрим на примере трех html-файлов и одного JavaScript:
index.html
<html>
<head></head>
<body>
<header>
<span data-text="lang.select"></span>
<ul>
<li><a data-action="set.lang" data-lang="en" data-text="lang.en"></a></li>
<li><a data-action="set.lang" data-lang="zh" data-text="lang.zh"></a></li>
</ul>
</header>
<main>
<h1 data-text="pages.list"></h1>
<ol>
<li><a href="a.html" data-text="pages.first"></a></li>
<li><a href="b.html" data-text="pages.second"></a></li>
</ol>
</main>
<script src="app.js"></script>
</body>
</html>
В индексе у нас есть две ссылки для выбора языка в заголовке и две ссылкина подстраницы.Давайте посмотрим на data атрибутов.Мы будем использовать их в нашем объекте переводчика.Остальные страницы относительно просты и прикреплены только для предварительного сохранения языка в перенаправлениях.
a.html
<html>
<body>
<h1 data-text="page.first.title"></h1>
<a href="index.html" data-text="pages.index"></a>
<script src="app.js"></script>
</body>
</html>
b.html
<html>
<body>
<h1 data-text="page.second.title"></h1>
<a href="index.html" data-text="pages.index"></a>
<script src="app.js"></script>
</body>
</html>
Эти файлы практически одинаковы, разница в атрибуте data-text.Теперь настало время представить app.js.
app.js
const DICT = {
en: {
'page.first.title': 'First Page Title',
'pages.index': 'Go to Index',
'page.second.title': 'Second Page Title',
'lang.select': 'Select Language',
'lang.en': 'English',
'lang.zh': 'Chinese',
'pages.first': 'Go do First',
'pages.second': 'Go to second',
'pages.list': 'List of pages'
},
zh: {
'page.first.title': '第一页标题',
'pages.index': '转到索引',
'page.second.title': '第二页标题',
'lang.select': '选择语言',
'lang.en': '英语',
'lang.zh': '中文',
'pages.first': '先做吧',
'pages.second': '转到第二个',
'pages.list': '页面列表'
}
};
Этот файл содержит словарь с двумя уровнями.Первый содержит язык, второй ключи используются как значения data-text.Вы можете отделить словарь от логики в реальном проекте, теперь он находится в том же файле для простоты.
Теперь мы хотим определить Translator объект.
function Translator() {
const lang = this.getLang();
this.setLang(lang);
console.log(lang);
const self = this;
document.querySelectorAll('[data-action][data-lang]').forEach(
e => e.addEventListener('click', function () {
console.log(this.dataset.lang);
self.setLang(this.dataset.lang)
})
);
}
В конструкторе мы сначала используемметод getLang, который будет представлен в ближайшее время.Возвращает строку с кодом языка.Затем мы используем setLang для установки этого языка, этот метод заполняет элементы html текстами из DICT.Наконец мы создаем прослушиватель событий при нажатии на ссылки для смены языка.
Теперь мы можем представить методы транслятора:
Translator.prototype.setLang = (lang) => {
document.querySelectorAll('[data-text]').forEach(
e => e.innerText = DICT[lang][e.dataset.text]
);
localStorage.setItem('lang', lang);
};
setLang получает lang и находит все элементы с атрибутом data-text, затем помещает в эти элементы переводы, определенные в DICT.После того, как этот язык будет сохранен в localStorage.Это ключ к выживанию языка при любом обновлении или перенаправлении.
Translator.prototype.getLang = () => {
const lang = localStorage.getItem('lang');
return lang ? lang : "en";
};
Метод getLang Получение lang из localStorage, но значение english установлено в качестве значения по умолчанию.В этом месте вы можете получить значение по умолчанию из URL-адреса или конфигурации браузера.
Наконец, последняя строка:
window.t = new Translator();
Не рекомендуется назначать что-либо окну, но в этом примере разрешитьдоступ к переводчику в консоли для отладки.
Конечно, есть много замечательных библиотек для управления языками на веб-сайтах, и я рекомендую вам научиться переводить без них, но в более сложных проектах следуйте последокументация вашей платформы, которая, вероятно, имеет решение, позволяющее управлять отложенной загрузкой или кэшированием.