Shell: Мультиязычность

HTML: Препроцессор Pug 1 сообщение
Обновлено: 10 июня, 23:20
20
Студентов
75%
Завершения

Интернационализация, или 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>

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов