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

Недавно я начал изучать Astro, чтобы создавать проекты в стиле информационной панели.

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

Проблема

Поддержка I18n в Astro очень хорошая. Он работает аналогично Next.js или любой другой платформе с маршрутизацией на основе структуры файлов/папок.

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

.
└── src/
    └── pages/
        ├── en/
        │   ├── login.astro
        │   └── dashboard.astro
        └── pt-br/
            ├── login.astro
            └── dashboard.astro

И на каждой странице есть свои строки i18n — круто!

Но здесь начинается моя проблема: я не хочу клонировать все свои страницы; Я просто хочу изменить строки на этих страницах.

Мне нужно что-то вроде /[any-language-flag]/all-my-routes.

Вы можете спросить: «Почему бы не использовать что-то вроде реакции-intl?» Мой ответ: я хочу в полной мере воспользоваться преимуществами движка Astro, особенно для SSG/SSR, и избегать любых компонентов на стороне клиента. Как правило, эти платформы используют контекст React, который отображается только на стороне клиента.

Попытки и неудачи

Прежде всего, я прочитал рецепт Astro об i18n и проверил некоторые общественные библиотеки, чтобы решить эту проблему.

Первой библиотекой, которую я попробовал, была astro-i18next, и она выглядела именно так, как мне было нужно!

На основе массива в файле конфигурации astro-i18next генерирует мои страницы i18n во время сборки, поэтому мне нужно написать код только один раз и не беспокоиться о клонировании страниц.

Проблема в том, что astro-i18next заархивирован или больше не поддерживается. Проблем много, а последний коммит был больше года назад.

Решение

Попробовав другие библиотеки (почетное упоминание astro-i18n), я нашел Paraglide, и это изменило правила игры для моего проекта.

Я выбрал параплан, потому что:

• Он типобезопасен, поэтому я могу использовать его с TypeScript и воспользоваться преимуществами автозаполнения.
• Он преобразует строки i18n в функции, поэтому, если строковый ключ изменится, моя сборка завершится неудачно, что приведет к раннему обнаружению ошибок.
• Использование функций i18n позволяет лучше встряхивать дерево, удаляя неиспользуемые функции.
• Существует расширение VS Code, которое улучшает процесс разработки.

Примечание. Вы также можете использовать Paraglide в проекте JS, он также поддерживает Next.js.

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

---
import * as m from "../paraglide/messages.js";
---

{m.hello({ name: "Alan" })}

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

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

Моя структура папок выглядела так:

.
└── src/
    └── pages/
        └── [lang]/
            ├── login.astro
            └── dashboard.astro

После этого изменения Paraglide может автоматически получать язык параметров маршрута:

• http://localhost:4321/en/login
• http://localhost:4321/pt-br/login

Теперь я могу добавить новый язык, просто настроив его в astro.config.ts и переведя строковый файл.

Но мне еще нужно решить две проблемы:

1. Когда пользователь впервые обращается к http://localhost:4321/ без языкового флага.
2. Если пользователь меняет язык на определенном маршруте, мне нужно сохранить его на том же маршруте (например, /en/create-account должно перенаправляться на /pt-br/create-account или /pt-br/criar-account ).

Промежуточное ПО для перенаправления языка

Чтобы решить первую проблему перенаправления языка, я использовал промежуточное программное обеспечение Astro.

В src/middleware/index.ts я добавил этот код:

import { defineMiddleware } from 'astro:middleware';
import {
  languageTag,
  setLanguageTag,
  type AvailableLanguageTag,
} from '../paraglide/runtime';

export const onRequest = defineMiddleware((context, next) => {
  // Obter o idioma do parâmetro da URL
  const lang = context.params.lang;

  // Se mudou
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirecionar para o idioma alterado ou padrão (en)
    return context.redirect(`/${lang ?? 'en'}`);
  }

  return next();
});

Выбор языка с текущим маршрутом

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

---
import { languageTag } from '../paraglide/runtime';

const pathName = Astro.url.pathname.replace(`/${languageTag()}/`, '');
---

• Ir para Português
• Go to English

Кроме того, мы также можем перевести эти сообщения, используя второй параметр в функции сообщения Paraglide:

• {m.goToLanguage(undefined, { languageTag: 'pt-br' })}
• {m.goToLanguage(undefined, { languageTag: 'en' })}

Соображения

Я не считаю свое решение лучшим, тем более что я все еще изучаю Astro, поэтому могут быть и другие решения. Если вы знаете что-нибудь, пожалуйста, прокомментируйте, и я попробую :)

Спасибо, что прочитали эту статью! Если есть вопросы, пишите в комментариях, с удовольствием отвечу.