akairatu b429b8bc5d last fix

2025-08-04 11:38:17 +05:00

4.5 KiB

Raw Blame History

Система Интернационализации (i18n) для ExamPass

Обзор

Система интернационализации позволяет переключаться между русским и английским языками на сайте ExamPass. Система автоматически сохраняет выбранный язык в localStorage и восстанавливает его при следующем посещении.

Структура файлов

src/js/
├── translations.js    # Файл с переводами
├── i18n.js           # Основная логика интернационализации
└── main.js           # Основной JavaScript файл (обновлен)

Как это работает

1. Файл переводов (`translations.js`)

Содержит объект translations с переводами для всех поддерживаемых языков:

const translations = {
    en: {
        nav_about: "About",
        hero_title_line1: "PASS ANY EXAM",
        // ... другие переводы
    },
    ru: {
        nav_about: "О нас",
        hero_title_line1: "СДАЙ ЛЮБОЙ ЭКЗАМЕН",
        // ... другие переводы
    }
};

2. Основная логика (`i18n.js`)

Класс I18n управляет:

Переключением языков
Сохранением выбранного языка
Обновлением контента на странице
Обновлением мета-тегов

3. HTML разметка

Элементы, которые нужно переводить, помечаются атрибутом data-i18n:

<a href="#about" data-i18n="nav_about">About</a>
<h1 data-i18n="hero_title_line1">PASS ANY EXAM</h1>

Использование

Переключение языков

Пользователи могут переключать язык, нажимая на кнопки "EN" или "RU" в навигации:

<div class="lang-switch">
    <a href="#" class="active">EN</a>
    <a href="#">RU</a>
</div>

Добавление новых переводов

Добавьте новый ключ в объект translations в файле translations.js:

const translations = {
    en: {
        new_key: "English text",
        // ...
    },
    ru: {
        new_key: "Русский текст",
        // ...
    }
};

Добавьте атрибут data-i18n к HTML элементу:

<p data-i18n="new_key">Default text</p>

Специальные случаи

Сложные элементы

Для элементов с HTML разметкой внутри (например, с <strong> тегами) используется специальная обработка в методе translateComplexElements().

Плейсхолдеры для input полей

Для input полей перевод применяется к атрибуту placeholder:

<input type="text" data-i18n="form_name_placeholder" placeholder="Enter your name">

Поддерживаемые элементы

Система автоматически переводит:

Навигационные ссылки
Заголовки секций
Описания
Кнопки и формы
Footer ссылки
Мета-теги (language, og:locale)

Тестирование

Для тестирования системы интернационализации используйте файл test.html. Он содержит примеры всех типов переводимых элементов.

Автоматическое сохранение

Выбранный язык автоматически сохраняется в localStorage браузера и восстанавливается при следующем посещении сайта.

SEO оптимизация

Система автоматически обновляет:

Атрибут lang у тега <html>
Мета-тег language
Open Graph тег og:locale

Это помогает поисковым системам правильно индексировать контент на разных языках.

Совместимость

Система работает во всех современных браузерах и не требует дополнительных зависимостей.

4.5 KiB Raw Blame History Unescape Escape