134 lines
4.5 KiB
Markdown
134 lines
4.5 KiB
Markdown
# Система Интернационализации (i18n) для ExamPass
|
||
|
||
## Обзор
|
||
|
||
Система интернационализации позволяет переключаться между русским и английским языками на сайте ExamPass. Система автоматически сохраняет выбранный язык в localStorage и восстанавливает его при следующем посещении.
|
||
|
||
## Структура файлов
|
||
|
||
```
|
||
src/js/
|
||
├── translations.js # Файл с переводами
|
||
├── i18n.js # Основная логика интернационализации
|
||
└── main.js # Основной JavaScript файл (обновлен)
|
||
```
|
||
|
||
## Как это работает
|
||
|
||
### 1. Файл переводов (`translations.js`)
|
||
|
||
Содержит объект `translations` с переводами для всех поддерживаемых языков:
|
||
|
||
```javascript
|
||
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`:
|
||
|
||
```html
|
||
<a href="#about" data-i18n="nav_about">About</a>
|
||
<h1 data-i18n="hero_title_line1">PASS ANY EXAM</h1>
|
||
```
|
||
|
||
## Использование
|
||
|
||
### Переключение языков
|
||
|
||
Пользователи могут переключать язык, нажимая на кнопки "EN" или "RU" в навигации:
|
||
|
||
```html
|
||
<div class="lang-switch">
|
||
<a href="#" class="active">EN</a>
|
||
<a href="#">RU</a>
|
||
</div>
|
||
```
|
||
|
||
### Добавление новых переводов
|
||
|
||
1. Добавьте новый ключ в объект `translations` в файле `translations.js`:
|
||
|
||
```javascript
|
||
const translations = {
|
||
en: {
|
||
new_key: "English text",
|
||
// ...
|
||
},
|
||
ru: {
|
||
new_key: "Русский текст",
|
||
// ...
|
||
}
|
||
};
|
||
```
|
||
|
||
2. Добавьте атрибут `data-i18n` к HTML элементу:
|
||
|
||
```html
|
||
<p data-i18n="new_key">Default text</p>
|
||
```
|
||
|
||
### Специальные случаи
|
||
|
||
#### Сложные элементы
|
||
|
||
Для элементов с HTML разметкой внутри (например, с `<strong>` тегами) используется специальная обработка в методе `translateComplexElements()`.
|
||
|
||
#### Плейсхолдеры для input полей
|
||
|
||
Для input полей перевод применяется к атрибуту `placeholder`:
|
||
|
||
```html
|
||
<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`
|
||
|
||
Это помогает поисковым системам правильно индексировать контент на разных языках.
|
||
|
||
## Совместимость
|
||
|
||
Система работает во всех современных браузерах и не требует дополнительных зависимостей. |