Первоначально опубликовано на colorfield.be

Первый пост этой серии был посвящен легкой настройке многоязычной среды Drupal и React для музейного веб-приложения Аудиогид.

Здесь описываются шаги для достижения MVP, который отображает список и страницу сведений о содержимом аудио, поэтому у нас есть возможность охватить несколько основных концепций React:

  • Компоненты: добавление из репозитория пакетов, наследование, компоновка, создание
  • Маршруты: маршрут по умолчанию и подстановочный знак.
  • Выбрать для использования отдыха
  • Локализация через React Intl

Французский и английский языки используются для описания функции перевода в этой демонстрации.

Часть 1: Серверная часть Drupal

Подготовьте содержимое

В предыдущем посте мы подготовили базовую среду Drupal для тестирования модуля JSON API с типом контента Article по умолчанию.
Теперь нам нужен переводимый Audio. тип содержимого с некоторыми дополнительными полями.

Вариант 1: создать новую установку Drupal

Если вы только начинаете с этого поста, вот репозиторий, который предоставляет то, что необходимо для бэкенда аудиогида. Это позволит избежать ручных операций, таких как тип контента и настройка языка, и поставляется с некоторым демонстрационным контентом.

git clone https://github.com/r-daneelolivaw/audioguide-demo-drupal
# cd in the cloned repository and install dependencies
composer install

Затем перейдите к установке Drupal и выберите профиль установщика конфигурации.

Пусть каталог по умолчанию ../config/sync

После завершения установки не обращайте внимания на предупреждающие сообщения об отсутствующих языках с предложением указать хотя бы еще один, французский язык устанавливается успешно. Создается патч для решения проблемы при отправке профиля с несколькими языками, а патч drupal-2413191–21.patch уже применялся во время установки композитора.

После установки вы можете заполнить демо-контент по умолчанию через этот URL-адрес /admin/content/demo.
Обратите внимание, что перевод узлов не связан друг с другом и файлами MP3. не переведены, но демонстрационный контент будет содержать 2 узла на французском и 2 на английском языках, что достаточно для нашей демонстрационной цели.

Вариант 2: продолжить с предыдущей настройки

В первой части урока мы создали 20 фиктивных статей, сначала избавьтесь от них.

# Assuming that you have devel generate enabled, see part 1
drush genc 0 --kill --types=article

Включите модуль Язык и Перевод контента.

drush en language content_translation -y

Добавьте французский язык в /admin/config/regional/language.

Затем вы можете создать тип контента «Аудио» и сделать его переводимым.

Определите следующие поля и для простоты пометьте все как обязательные:

  • Заголовок (по умолчанию) — переводимый по умолчанию при определении типа контента как переводимого.
  • Основная часть (по умолчанию) — можно перевести, установив флажок «Пользователи могут переводить это поле».
  • Id (field_id, целое число) — непереводимо
  • MP3 (field_mp3, файл, который поддерживает mp3) — в этой демонстрации нельзя перевести, но это не повлияет на код React.

Затем создайте контент для обоих языков в /admin/config/development/generate/content и предоставьте mp3-файлы.

Протестируйте выходные данные JSON API

Если все прошло хорошо, теперь у вас должен быть другой вывод JSON для каждого языка.

/jsonapi/node/audio?filter[langcode][value]=fr
/jsonapi/node/audio?filter[langcode][value]=en

Документация JSON API Drupal.org о фильтрации, сортировке и разбиении на страницы.

Часть 2: Внешний интерфейс React

Репозиторий также доступен для веб-приложения React. То, что описано ниже, живет в ветке 01-mvp.

Настройка языка для l10n (локализация)

Следующие изменения определят французский язык в качестве языка перевода вместо чешской конфигурации по умолчанию, которая поставляется с веткой React Intl в React Starter Kit.

Изменить локали по умолчанию

Отредактируйте /src/config.js и измените язык по умолчанию на канадский французский или любой другой, просто убедитесь, что он соответствует вашей конфигурации Drupal.

// change
locales: ['en-US', 'cs-CZ'] 
// to 
locales: ['en-US', 'fr-CA']

Отредактируйте /src/client.js и снова измените значение по умолчанию

// change
import cs from 'react-intl/locale-data/cs';
(...)
[en, cs].forEach(addLocaleData);
// to
import fr from 'react-intl/locale-data/fr';
(...)
[en, fr].forEach(addLocaleData);

Измените название языка LanguageSwitcher

Отредактируйте компонент LanguageSwitcher в /src/components/LanguageSwitcher/LanguageSwitcher.js.

// change
const localeDict = {
    'en-US': 'English',
    'cs-CZ': 'Česky',
};
// to
const localeDict = {
    'en-US': 'English',
    'fr-CA': 'Français',
};

Извлечь сообщения

Сообщения, которые используются в пользовательском интерфейсе (через компоненты и т. д.), могут быть извлечены для перевода. Вы можете думать об этом как об эквиваленте potx.

Эта команда создает файлы json в каталоге /src/messages.

yarn run extractMessages
# or just
yarn start

Выполнение yarn start также отобразит родной язык Hubert Reeves в переключателе языков, проверьте его здесь
http://localhost:3001/?lang=fr-CA

Вы можете предоставить переводы для каждого атрибута message в созданном файле /src/messages/fr-CA.json.

Дополнительные варианты перевода описаны в документации из React Starter Kit.

Создайте компоненты

На этой итерации мы создадим два новых компонента React:

  • AudioContentList : переведенный список аудиоконтента, поступающего из Drupal, со статическим локализованным введением, предоставленным файлом Markdown.
  • AudioContentPage: страница сведений об аудиоконтенте (с заголовком, идентификатором, текстом, mp3).

На следующей итерации (часть 3 из 3 этого урока) мы добавим

  • Селектор профиля (например, общий, молодежный, слепой), поэтому мы можем продемонстрировать фильтрацию терминов таксономии, добавив ссылку на термин из нового словаря профиля аудио для типа контента «Аудио».
  • Поиск по полям идентификатора аудио и заголовка.
  • Отобразите изображение для каждого аудио на странице тизера и подробной информации, поэтому мы также можем ввести компонент многократного использования для каждого эквивалента «режима отображения» React.
  • Непрерывное воспроизведение аудиофайла при возврате к списку (поведение приложения YouTube).
  • Оставлять комментарии к аудиоконтенту.

Держите глобальную ссылку на домен Drupal

Отредактируйте файл /src/constants/index.js и добавьте этот const, не совсем уверен, что это лучшее место, но, похоже, оно работает.

// Change by your Drupal dev environment
export const REST_HOST_NAME = 'http://audioguide.dev';

Теперь мы можем перейти в каталог /src/components для создания наших компонентов.

Создайте компонент AudioContentList.

Создайте каталог AudioContentList, который будет содержать 3 файла:

  • пакет.json
  • Аудиоконтентлист.js
  • Аудиоконтентлист.css

Этот компонент использует два компонента, предоставляемых шаблоном:

  • Страница через наследование
  • Ссылка через композицию

Обратите внимание, что компонент не должен извлекать данные из componentDidMount, потому что после монтирования он не будет правильно переводить узлы при смене языка.

Таким образом, вместо того, что указано в коде ниже, мы должны получать данные из маршрута (см. раздел маршрутизации React ниже).

Кроме того, недостатком метода Route вместо componentDidMount является то, что веб-служба вызывается на каждом дисплее. Но для простоты мы не рассматриваем здесь другой способ решения этой проблемы (например, прослушивание изменения языка и повторный рендеринг с новыми данными).

Создайте компонент AudioContentPage.

В этом случае мы используем компонент из репозитория пакетов npm, чтобы получить базовую оболочку аудиоплеера для тега html5.

Сначала добавьте его.

yarn add react-audio-player
# note that this is similar to
npm install --save react-audio-player

Создайте каталог AudioContentPage с той же файловой структурой.

  • пакет.json
  • AudioContentPage.js
  • AudioContentPage.css

Реагировать на маршрутизацию

Перейдите в каталог /src/routes.

Создайте маршрут списка аудиоконтента

Это будет маршрут по умолчанию: localhost:3001/

Создайте каталог audio_list, в котором будут храниться эти 3 файла:

  • index.js : файл маршрутизации
  • audio_list.md: статическое содержимое по умолчанию
  • audio_list.fr-CA.md: статический контент, локализованный на французском языке.

Здесь мы используем fetch ​​для получения данных Drupal. Существуют и другие решения, такие как Axios, но выборка, как правило, становится общепринятой.
Один из примечательных фактов заключается в том, что нам нужно определить эту структуру, которая соответствует JSON API { audioList: { data: [] } }.
Кроме того, убедитесь, что у вас есть хотя бы один опубликованный узел, так как модуль JSON API автоматически фильтрует неопубликованные узлы.

Создайте маршрут страницы аудиоконтента

Единственное заметное изменение — это подстановочный знак :id в маршруте, который будет заполняться из AudioContentList с UUID узла Drupal. Мы делаем два вызова: один для получения узла, другой для mp3-файла. Для улучшения на следующей итерации.

Ссылка на новые маршруты

Отредактируйте /src/routes/index.js.

Удалим ненужные маршруты и добавим новые, так что у нас получится что-то вроде этого.

children: [
  require('./audio_list').default,
  require('./audio_page').default,
  // Wildcard routes, e.g. { path: '*', ... } (must go last)
  require('./notFound').default,
],

Документация по маршрутизации из React Starter Kit.

В завершение удалите ссылки на все неиспользуемые компоненты из определения компонентов Header.js и Footer.js.
Удалите ‹Navigation /› и ‹Link /› теги.

Вот и все ребята из React, увидимся на следующей итерации!

Ресурсы