Интернационализация, или i18n — подход, позволяющий иметь несколько языковых версий страницы. В зависимости от настроек пользователю выводится страница на том или ином доступном языке, что позволяет делать мультиязычные сайты и не плодить множество файлом для каждого из них.
Реализация i18n бывает разная и для каждого популярного фреймворка есть своя, но принцип везде похожий: создаётся объект с переводом всех необходимых фраз/предложений, который подгружается в зависимости от условий.
В этом испытании реализуйте подход i18n с использованием JavaScript и Pug. Вам предстоит создать объекты в файлах js и подставить данные в файлы pug. Само задание почти полностью повторяет упражнение Условные конструкции
Реализуйте меню и тестовый блок для администрации и пользователя на Хекслете. На вход в файл profile.pug с сервера поступает объект с пользователем в следующем виде:
const user = {
name: 'Кодовёнок',
surname: 'Хекслетович',
role: 'user',
}
Для пользователя страница имеет шаблон:
- Имя пользователя
- Меню из следующих пунктов:
- Настройки
- Промокод
- Доступ в подарок
- Помощь
- Выйти
Если роль пользователя не user, то в дополнение к существующим пунктам меню добавляются три новых:
- Учительская
- Менторство
- Маркетинг
Для страницы доступны две языковые локализации: русская и английская. Каждая локализация лежит в отдельном файле. Сама по себе локализация — объект, который можно описать так:
pageName: {
key1: "translate",
key2: "translate",
key3: "translate",
}
Для русской локализации уже написана часть объекта. Вы можете начать работу именно с него, а впоследствии сделать локализацию для английского языка. Все имена ключей вы можете выбрать самостоятельно. Получившийся объект попадёт в profile.js при тестировании. Этот объект вам и необходимо использовать при создании разметки.
Пары для перевода в формате русская локализация: английская локализация
- Профиль студента: Student Profile
- Настройки: Settings
- Промокод: Promo Code
- Доступ в подарок: Access as a gift
- Учительская: Teacher's
- Менторство: Mentoring
- Маркетинг: Marketing
- Помощь: Help
- Выйти: Log off
Пример вёрстки для администратора. Русская локализация
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Профиль студента</title>
</head>
<body>
<section class="profile-links">
<h1>Кодовёнок Хекслетович</h1>
<nav>
<a href="#">Настройки</a>
<div class="divider"></div>
<a href="#">Промокод</a>
<a href="#">Доступ в подарок</a>
<div class="divider"></div>
<a href="#">Учительская</a>
<a href="#">Менторство</a>
<a href="#">Маркетинг</a>
<div class="divider"></div>
<a href="#">Помощь</a>
<button>Выйти</button>
</nav>
</section>
</body>
</html>
Пример вёрстки для студента. Английская локализация
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Profile</title>
</head>
<body>
<section class="profile-links">
<h1>Кодовёнок Хекслетович</h1>
<nav>
<a href="#">Settings</a>
<div class="divider"></div>
<a href="#">Promo Code</a>
<a href="#">Access as a gift</a>
<div class="divider"></div>
<a href="#">Help</a>
<button>Log off</button>
</nav>
</section>
</body>
</html>
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.