Реализация i18n и лучшие практики в Strapi

В этой статье рассказывается о том, как реализовать интернализацию в Strapi.

Автор: Попула Темитопе

Вы когда-нибудь посещали сайт и замечали, что он не на вашем родном языке или любом другом языке, на котором вы говорите и понимаете? Это может расстроить и разочаровать одновременно. Скорее всего, в такие моменты у вас остается только два варианта: уйти или найти способ перевести сайт.

Невозможность прочитать содержимое сайта из-за разницы в языке — это огромный недостаток в пользовательском опыте. Если вы являетесь администратором Strapi или владельцем сайта Strapi, то это не то, чего вы хотите для своих пользователей.
У Strapi есть решение для этого. Плагин i18n локализации Strapi, поставляемый вместе с версией 3.6.0 или выше, эффективно справляется с этой проблемой. Вот как создавать приложения для международной аудитории с помощью плагина Strapi i18n Plugin. Теперь давайте уделим немного времени изучению настройки этого плагина и некоторых его лучших практик.

Локализация и интернационализация (i18n и L10)

i18n и L10n — это аббревиатуры для интернационализации и локализации соответственно. Интернационализация и локализация — это методы разработки программного обеспечения, целью которых является предоставление контента пользователям на понятном им языке без внесения технических изменений. Процесс включает в себя перевод контента на разные языки и даже реструктуризацию страниц для удобства пользователей.

Интернационализация и локализация

Часто понятия локализация и интернационализация используются как взаимозаменяемые, но это не одно и то же. Между этими двумя терминами есть разница. Разница очень проста.
Интернационализация — это процесс разработки программного обеспечения с учетом интересов международного сообщества. Она предполагает адаптацию программного обеспечения к различным языкам и регионам без внесения инженерных изменений, в то время как локализация адаптирует интернационализированное программное обеспечение, чтобы сосредоточиться на конкретной части. Я могу сделать это, переведя текст и добавив соответствующие компоненты, характерные для конкретной местности. Локализовать можно только интернационализированное программное обеспечение.

Предварительные условия

Чтобы правильно следовать этому руководству, вы должны иметь:

  • Node.js V14.x или V12, установленный на вашем компьютере. Чтобы проверить версию вашего node, используйте команду node -v.
  • На вашем компьютере установлен NPM или Yarn.## Локализация в Strapi

Локализация, как и многие другие обязанности администратора сайта, была упрощена для пользователей Strapi. Чтобы реализовать локализацию в приложении Strapi, необходимо установить и правильно настроить плагин Strapi i18n.
Приложениям Strapi, работающим на версии 3.6.0 или выше, не нужно устанавливать этот плагин, так как он уже поставляется с ними. Если ваше приложение работает на версии Strapi ниже, чем та, которую мы приводим здесь, вы можете рассмотреть возможность миграции вашего приложения. Если вы не знаете, как это сделать, нажмите здесь. Вы также можете установить плагин с помощью команд NPM или Yarn:

    yarn strapi install i18n
    or
    npm run strapi install i18n
Войти в полноэкранный режим Выйти из полноэкранного режима

Плагин i18n Strapi требует некоторой настройки, чтобы вступить в силу на панели администратора Strapi. Давайте рассмотрим шаги, связанные с внедрением плагина i18n.
Как внедрить i18n
Чтобы правильно понять это, нам нужен некоторый практический опыт. Начнем с создания нового проекта Strapi с помощью следующей команды.

     Yarn create-strapi-app@latest my-project --quickstart
    or
    npx create-strapi-app@latest my-project --quickstart
Войти в полноэкранный режим Выйти из полноэкранного режима

После успешной установки Strapi автоматически запустится и запустит проект в вашем браузере, где вам потребуется создать учетную запись администратора.

После успешного создания аккаунта, он должен перенаправить вас на вашу приборную панель Strapi. i18n является плагином Strapi и может быть найден на странице списка плагинов. Чтобы просмотреть свои плагины, в боковом меню перейдите по пути Общие→Плагин, чтобы убедиться, что плагин установлен в вашем проекте.

Далее нам нужно активировать этот плагин и создать новые локали. Для этого в меню боковой панели перейдите по пути Настройки→Интернационализация→Добавить локаль.

Давайте добавим новую локаль для тестирования. Я добавлю новую французскую локаль. Процесс прост. Нажмите на Добавить локаль→выберите Локаль из выпадающего списка→сохранить.

Примечание: Вы можете добавить столько локалей, сколько хотите для своего проекта.

На панели интернационализации вы можете удалить локали или изменить локаль по умолчанию для вашего проекта. В этом учебнике мы оставим локаль по умолчанию английской.
Создайте тип коллекции
Нам нужен контент для тестирования локализации в Strapi. Чтобы продолжить, давайте создадим тип содержимого и добавим в него контент. Если вы новичок в Strapi и не знаете, как создать тип коллекции, не волнуйтесь. Мы проведем вас через весь процесс.
Чтобы создать тип содержимого Post, следуйте приведенным ниже инструкциям.

  1. В меню приборной панели нажмите на Content-type Builder→создайте новый тип коллекции.
  2. Введите отображаемое имя для вашего типа коллекции и нажмите кнопку Продолжить. Обратите внимание на поле API ID, localhost:1337/api/posts, которое содержит идентификатор конечной точки API, к которой будет осуществляться доступ к вашему контенту.

  3. Далее нам нужно добавить поля, в которых будет содержаться содержимое поста. Для этого нажмите на кнопку «Добавить еще одно поле».

  4. Выберите все необходимые поля для типа коллекции Post. В нашем случае тип содержимого Post будет иметь следующие поля:

  5. Имя: Имеет тип string

  6. Тело: имеет тип rich-text

  7. Дата: Тип даты

  8. После добавления этих полей нажмите кнопку Сохранить, и в вашем проекте должен появиться тип данных Post.

  9. Повторите процесс, показанный на рисунке выше, для остальных полей.

  10. Сохранить. После сохранения у нас должен появиться только что созданный тип коллекции Post.

Управление содержимым
Нам нужно создать содержимое нашего первого поста, а затем рассмотреть создание одного и того же поста на разных языках или локалях с помощью Strapi. Создайте новое содержимое поста, перейдя в Content Manager → Post collection и нажав на кнопку «Create an entry».

Введите все необходимое содержимое для каждого поля и сохраните его. После сохранения нажмите на кнопку «Опубликовать». Теперь мы успешно создали содержимое коллекции постов для локали по умолчанию (английский язык).
Команда разработчиков Strapi проделала огромную работу, сделав локализацию очень простой. Некоторые из отличных функций, которые они в нее встроили, включают:

  • Простое редактирование Post.
  • Импорт содержимого из предыдущей локали во вновь созданную локаль.
  • Некоторые поля можно настроить так, чтобы они не изменялись независимо от локали.
  • Редактирование или создание уникальной структуры страницы для конкретной локали.

Добавление содержимого локали
Давайте рассмотрим некоторые из этих возможностей, сделав наш первый пост доступным на французском языке. Нажмите Post → выберите пост → нажмите edit. На странице редактирования найдите Интернационализация в правом углу и выберите Французский язык.

Как показано на рисунке выше, с левой стороны выберите French в разделе locales и заполните содержимое поста из предыдущей локали, которая в нашем случае была английской. Таким образом, вы сможете легко отредактировать текст на нужный вам язык.
В моем случае я использовал Google Translate, чтобы получить французский перевод содержимого моего тестового поста, как вы можете видеть на изображении выше. Главное, что следует отметить, — это то, что перевести пост на новый язык становится намного проще с помощью Strapi.
Как только вы сохраните пост, он станет доступен на английском и французском языках, что просто замечательно. Еще одна вещь, которую вы можете сделать, это отключить локализацию в тех частях поста, где вы хотите сохранить язык по умолчанию.
Редактирование локали поля
Мы можем отредактировать тип содержимого Post и отключить локализацию для этого поля. Давайте отключим локализацию для поля Имя в нашем посте. Нажмите на Редактировать поля → редактировать → расширенные настройки → отключить локализацию.
Изображения ниже объясняют подробнее.

Нажмите на значок пера, как показано на изображении ниже:

Включите локализацию для поля и нажмите на кнопку Готово.

Мы можем дополнительно отредактировать страницу нашего французского локального сайта, чтобы она выглядела уникально. Мы можем добавить функции, которых не будет в английской локализации. Я нахожу это очень полезным.
Использование API
Вы можете использовать красоту локализации даже при работе с API контента Strapi. Мы можем получать контент, специфичный для определенной локали, и делать множество других интересных вещей с помощью API.
Давайте приступим к этому. В этом руководстве я буду использовать Postman для взаимодействия с моим приложением Strapi.
Получение локализованного содержимого
Давайте сделаем запрос к конечной точке Strapi и получим все содержимое, относящееся к языку по умолчанию. В нашем случае языком по умолчанию является английский, но если вы попытаетесь сделать этот запрос с помощью Postman, вы получите ошибку с сообщением об ошибке, как показано ниже.

Посмотрите на тело ответа, и вы заметите, что запрос вернул запрещенную ошибку.
http://localhost:1337/api/posts

 {
        "statusCode": 403,
        "error": "Forbidden",
        "message": "Forbidden"
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Этот сценарий является ошибкой разрешения. Нам нужно отредактировать нашу коллекцию постов, чтобы она принимала запросы от неаутентифицированных пользователей. Для этого щелкните настройки→роли→разрешения→приложение.

Здесь вы можете выбрать, кто должен иметь доступ. Еще раз, для этого простого учебника я выберу «все».
Сделав это, давайте перейдем в Postman и снова выполним вызов. Теперь наш запрос прошел успешно. Вы заметили, что мы извлекли язык по умолчанию Post, что нам и было нужно?

С помощью параметра API locale мы можем получить данные, относящиеся к определенной локали. Вы должны передать код локали вместе с вызовом в качестве параметра. Запрос должен быть GET-запросом. Итак, давайте попробуем выполнить вызов конечной точки с помощью Postman, чтобы получить все сообщения на французском языке.

Обратите внимание на URL, по которому мы совершили вызов localhost:1337/posts?_locale=fr-CA. /post — это конечная точка для получения постов из нашей коллекции Post. Мы добавили префикс _locale, который указывает, что мы хотим получать содержимое из определенной локали. fr-CA указывает, что мы хотим получать посты из французской локали.

Создание новой локализованной записи

Мы можем создать локализованную запись для поста с помощью API контента. Для этого нужно отправить запрос Post на content API. Запрос должен содержать параметр локали, который указывает на новую локаль, которую мы собираемся создать. Приведенный ниже фрагмент кода является примером того, как должен выглядеть запрос локализованного поста.

{
      "name": "She's Cake",
      "description": "She's Cake restaurant description in French",
      "locale": "fr-CA"
}
Вход в полноэкранный режим Выход из полноэкранного режима

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

{
      "name": "Oplato",
      "description": "Oplato restaurant description in English"
}
Вход в полноэкранный режим Выход из полноэкранного режима

Сказав это, давайте замажем руки. Давайте создадим новую локаль через Strapi API с помощью Postman. Мы отправим наш запрос на конечную точку Posts, localhost:1337/posts.

Как вы можете видеть, мы успешно создали пост в новую локаль с помощью API. Мы лишь поверхностно ознакомились с тем, как можно использовать локализацию с помощью API. Более подробное руководство по выполнению задач локализации с помощью API можно найти здесь.

Лучшие практики использования i18n в Strapi

Некоторые лучшие практики, которые я могу порекомендовать при работе со Strapi, включают следующее:

  • Просматривайте содержимое по локали.
  • Редактируйте страницы или посты в локалях и легко переключайтесь между ними.
  • Выбирайте, какая локаль должна отображаться первой.
  • Сохраняйте содержание одинаковым для всех локалей.
  • Работать с редакторами и писателями в соответствии с локалью.## Заключение

К этому моменту вы должны:

  • Лучше понимать локализацию и интернационализацию (i18n и L10),
  • Уметь реализовывать локализацию в Strapi из панели управления и API соответственно, и
  • Понимать лучшие практики при внедрении локализации в Strapi.

Strapi — это безголовая CMS с открытым исходным кодом, построенная на Node.js и React.js. Вы можете использовать API с любым внешним фреймворком по вашему выбору. В нем используется Jamstack (современная архитектура веб-разработки, основанная на клиентском JavaScript, многократно используемых API и готовой разметке). Более подробную информацию о Strapi можно найти в документации.

Оцените статью
devanswers.ru
Добавить комментарий