Для реализации переключения языков на многоязычном сайте без использования бэкэнда, можно воспользоваться различными подходами в языке JavaScript. Ниже приведен пример реализации такого функционала с использованием JavaScript и JSON для хранения языковых переменных.
1. **Подготовка языковых ресурсов:**
Создайте файлы JSON для каждого языка, содержащие переводы всех текстов на сайте. Например, en.json, fr.json, ru.json.
Пример содержимого en.json:
{
"home": "Home",
"about": "About",
"contact": "Contact"
}
2. **HTML разметка:**
В HTML добавьте атрибут data-i18n к элементам, которые должны быть переведены.
Пример:
<button data-i18n="home"></button> <button data-i18n="about"></button> <button data-i18n="contact"></button>
3. **JavaScript код:**
Создайте JavaScript функцию для загрузки языковых ресурсов и перевода текстов. При смене языка функция будет подставлять соответствующие переводы.
Пример:
let currentLang = 'en';
function loadLanguage(lang) {
fetch(`${lang}.json`)
.then(response => response.json())
.then(data => {
document.querySelectorAll('[data-i18n]').forEach(element => {
const key = element.getAttribute('data-i18n');
element.textContent = data[key];
});
});
}
document.querySelectorAll('.lang-selector').forEach(selector => {
selector.addEventListener('click', function() {
const lang = this.getAttribute('data-lang');
currentLang = lang;
loadLanguage(lang);
});
});
// Default language
loadLanguage(currentLang);
4. **Добавление переключателя языка:**
Добавьте элементы для выбора языка и атрибут data-lang, который будет использоваться для определения выбранного языка.
Пример:
<button class="lang-selector" data-lang="en">English</button> <button class="lang-selector" data-lang="fr">Français</button> <button class="lang-selector" data-lang="ru">Русский</button>
Таким образом, при загрузке страницы будет использоваться язык по умолчанию (например, английский). При выборе другого языка, тексты на странице будут динамически обновляться согласно выбранному языку. Этот подход использования JSON и JavaScript позволяет гибко управлять переводами на многоязычном сайте без необходимости обращения к бэкэнду.