Распространенные ошибки, обнаруженные при разработке многоязычных веб-сайтов о Гэтсби
Вы работаете над веб-сайтом Гэтсби, который должен работать на нескольких языках? Имея свой опыт, мы подробно объясним, как этого можно достичь, выявив при этом общие ошибки.
В этой статье мы будем работать с файлами перевода json, используя i18n.
Выбор плагина
Есть несколько плагинов для интернационализации веб-сайтов Gatsby. Мы обнаружили, что gatsby-plugin-intl, кажется, является одним из самых популярных: около 6 000 загрузок в неделю на npm. Он использует react-intl за кулисами, который еженедельно скачивается около 950 тысяч на npm!
Если посмотреть на реализацию, то сразу видно, что он многое делает из коробки, а настройка очень минимальна, как видно на странице инструкций по настройке. Однако не позволяйте этому вводить вас в заблуждение, есть некоторые важные моменты, которые вам следует знать, поскольку для некоторых конкретных способов работы потребуются некоторые обходные пути с использованием этого модуля.
Настройка gatsby-plugin-intl
Документация для начальной настройки довольно ясна, но давайте рассмотрим ее вместе.
Прежде всего, вам нужно установить пакет npm, npm install --save gatsby-plugin-intl.
Во-вторых, нам понадобится место для хранения файлов переводов. Обычно это хранится в /src/intl/[languagecode].json. Создайте пустые файлы json с этой структурой.
Настройте конфигурацию плагина в gatsby-config.js, вставив приведенную ниже конфигурацию в свой массив плагинов. Я не обнаружил никаких проблем с его заказом в начале или в конце списка плагинов, но если у вас возникнут какие-либо ошибки при настройке, вы можете попробовать переместить его в свой список плагинов, на всякий случай там какие-либо конфликтующие плагины Gatsby.
Обратите внимание, что массив языков должен содержать те же имена, что и файлы i18n json, которые вы создали ранее.
На этом настройка завершена. Убедитесь, что ваш экземпляр Gatsby по-прежнему работает правильно, быстро его раскрутите.
Использование файлов интернационализации
Далее мы можем начать использовать переводы. Представим, что у нас есть следующие простые переводы json-файла /src/intl/en.json. О вложении контента мы поговорим позже. Также создайте аналогичный файл для другого языка, например /src/intl/nl.json, если вы хотите, чтобы он был и на голландском.
Использование международных крючков
Откройте любой компонент React, где вы хотите использовать метки из переводов. Прежде всего, импортируйте ловушку useIntl из пакета gatsby-plugin-intl.
Затем мы можем получить объект intl, используя этот хук, как показано ниже.
Действительно, очень просто. С этого момента мы можем получать переводы с помощью функции formatMessage или компонента FormattedMessage React.
Теперь ваша очередь, попробуйте и посмотрите, получите ли вы правильный перевод! Переключение из папки localhost/en/ в папку localhost/nl/ даст вам переводы на другой язык, который вы определили в конфигурации.
Использование Intl HOC (компонент высшего порядка)
Использование версии HOC из пакета gatsby-plugin-intl не сильно отличается. Сначала мы импортируем функцию injectIntl.
Затем, когда мы экспортируем наш компонент, мы оборачиваем его функцией injectIntl.
Затем мы получим объект intl в качестве опоры.
Создание ссылок на другие страницы
Поскольку структура URL-адреса немного изменилась, в том числе языковой стандарт внутри пути, вам также необходимо позаботиться об этом.
Либо вы можете использовать intl.locale в качестве значения и самостоятельно сгенерировать путь, например /${intl.locale}/contact, либо вы можете использовать специально созданный компонент из пакета gatsby-plugin-intl. Вот пример:
Общие ловушки
При первой настройке gatsby-plugin-intl есть некоторые подводные камни. Пройдемся по самым важным.
Вложенные переводы
Прежде всего, не объясняется структура, разрешенная в таких файлах i18n json. Фактически, в настоящее время разрешено вложение первого уровня. Например:
Однако вложение более чем на один уровень пока не поддерживается! К сожалению, в настоящее время мы застряли только на одном уровне вложенности. Если вы все же попытаетесь это сделать, вы можете получить загадочную ошибку перекрестной среды React. Если копнуть глубже, вы обнаружите, что в журнале ошибок указано, что локализация не найдена.
Переводы со списками
Определение массивов в файлах i18n не сработало так, как мы ожидали. Сообщения были определены правильно, но метод formatMessage в настоящее время не может возвращать массивы. Например:
Мы видим, что мы можем получить элементы, специально указав полный путь, но невозможно получить сразу весь массив.
Обходной путь - не использовать /src/intl файлы, а вместо этого создать свои собственные файловые структуры. Затем, используя значение intl.locale, вы можете импортировать правильный файл. Это идея, хотя мы еще не тестировали, что это будет означать с точки зрения SEO, будут ли метки анализироваться немедленно.
Обновление файлов переводов
После обновления файлов перевода i18n необходимо полностью перезапустить сервер gatsby. Горячая перезагрузка на gatsby develop сервере работать не будет!
Вывод
gatsby-plugin-intl великолепен и автоматизирует множество задач, связанных с разработкой многоязычных веб-сайтов. Однако вы должны точно знать, как его использовать, какова может быть структура файлов i18n и так далее.
Еще жаль, что он не поддерживает многоуровневую вложенность и массивы в файлах перевода. Такая поддержка станет отличным дополнением и поможет в использовании более динамичных форматов контента.
Дальнейшее чтение
В целом, gatsby-plugin-intl нас вполне устраивает, но это не единственная доступная реализация. Есть еще один плагин gatsby-plugin-i18n, который еженедельно скачивается около 5 тыс., Что чуть меньше, чем gatsby-plugin-intl.
Полное руководство было написано gatsby-plugin-i18n Дэвидом Далем Буско. Я рекомендую взглянуть на его статью, чтобы понять различные способы реализации интернационализации, чтобы принять решение и выбрать плагин, который будет соответствовать вашим потребностям.
Мы настоятельно рекомендуем прочитать документацию по npm, чтобы понять полный набор функций. В этой статье мы только выделили то, что считаем наиболее важными.
