Посмотрите, что такое искусство в португальской клике, здесь

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

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

Проблема

Поддержка Astro i18n довольно хороша. Он работает аналогично 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 -конта).

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

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

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

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

export const onRequest = defineMiddleware((context, next) => {
  // Get lang from url param
  const lang = context.params.lang;

  // If changed
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirect to lang changed or default (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, поэтому могут быть и другие решения. Если вы знаете какие-либо, пожалуйста, прокомментируйте, и я попробую :)

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