Wenn Sie diesen Artikel auf Englisch lesen möchten, klicken Sie hier

Ich habe vor Kurzem begonnen, Astro beizubringen, ein Projekt im Dashboard-Stil zu erstellen.

Ich möchte in diesem Projekt unbedingt die Internationalisierung (i18n) implementieren – das Ziel ist, dass jeder sie nutzen kann, unabhängig von der Sprache.

Problem

I18n-Unterstützung auf Astro ist sehr gut. Es funktioniert ähnlich wie Next.js oder jedes andere Framework mit Routing basierend auf der Datei-/Ordnerstruktur.

Wenn wir also eine Seite auf Englisch und dieselbe Seite auf Portugiesisch haben möchten, können wir unsere Dateien wie folgt organisieren:

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

Und jede Seite hat ihre eigenen i18n-Strings – cool!

Aber hier beginnt mein Problem: Ich möchte nicht alle meine Seiten klonen; Ich möchte nur die Zeichenfolgen auf diesen Seiten ändern.

Ich brauche so etwas wie /[any-lingual-flag]/all-my-routes.

Sie fragen sich vielleicht: „Warum nicht so etwas wie „react-intl“ verwenden?“ Meine Antwort ist, dass ich die Vorteile der Astro-Engine, insbesondere für SSG/SSR, voll ausnutzen und jegliche clientseitige Komponenten vermeiden möchte. Im Allgemeinen verwenden diese Frameworks React Context, der nur auf der Clientseite gerendert wird.

Versuche und Misserfolge

Zuerst habe ich Astros Rezept zu i18n gelesen und mir einige Community-Bibliotheken angesehen, um dieses Problem zu lösen.

Die erste Bibliothek, die ich ausprobiert habe, war astro-i18next, und sie schien genau das zu sein, was ich brauchte!

Basierend auf einem Array in der Konfigurationsdatei generiert astro-i18next meine i18n-Seiten zur Erstellungszeit, sodass ich nur einmal programmieren muss und mir keine Gedanken über das Klonen von Seiten machen muss.

Das Problem besteht darin, dass astro-i18next archiviert zu sein scheint oder nicht mehr gepflegt wird. Es gibt viele Probleme und der letzte Commit war vor über einem Jahr.

Lösung

Nachdem ich andere Bibliotheken ausprobiert hatte (lobende Erwähnung für astro-i18n), fand ich Paraglide, und es war ein Wendepunkt für mein Projekt.

Ich habe mich für Paraglide entschieden, weil:

• Es ist typsicher, sodass ich es mit TypeScript verwenden und die Vorteile der automatischen Vervollständigung nutzen kann.
• Es konvertiert i18n-Strings in Funktionen. Wenn sich also ein String-Schlüssel ändert, schlägt mein Build fehl und Fehler werden frühzeitig erkannt.
• Die Verwendung von i18n-Funktionen ermöglicht ein besseres Tree-Shaking und entfernt ungenutzte Funktionen.
• Es gibt eine VS Code-Erweiterung, die das Entwicklungserlebnis verbessert.

Hinweis: Sie können Paraglide auch in einem JS-Projekt verwenden und es unterstützt auch Next.js.

Nach der Installation und Konfiguration habe ich meine Nachrichten wie folgt verwendet:

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

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

Das hat mein Routing-Problem jedoch nicht gelöst – ich habe meine Seiten immer noch für jede Sprache geklont, die ich hinzufügen wollte.

Um dieses Problem zu beheben, habe ich mein Projekt geändert, um dynamische Routen in der Stammroute zu verwenden, sodass alle meine Routen jetzt mit der Sprachflagge beginnen.

Meine Ordnerstruktur sah so aus:

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

Nach dieser Änderung kann Paraglide automatisch die Routenparametersprache erhalten:

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

Jetzt kann ich eine neue Sprache hinzufügen, indem ich sie einfach in astro.config.ts konfiguriere und meine String-Datei übersetze.

Aber ich habe noch zwei Probleme zu lösen:

1. Wenn der Benutzer zum ersten Mal ohne Sprachkennzeichnung auf http://localhost:4321/ zugreift.
2. Wenn der Benutzer die Sprache auf einer bestimmten Route ändert, muss ich sie auf derselben Route belassen (z. B. sollte /en/create-account zu /pt-br/create-account oder /pt-br/criar-account umleiten ).

Middleware für die Sprachumleitung

Um das Problem der Umleitung der ersten Sprache zu lösen, habe ich Astro-Middleware verwendet.

In src/middleware/index.ts habe ich diesen Code hinzugefügt:

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();
});

Sprachauswahl mit aktueller Route

Um den Benutzer beim Ändern der Sprache auf dem gleichen Weg zu halten, habe ich diese Komponente hinzugefügt:

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

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

• Ir para Português
• Go to English

Darüber hinaus können wir diese Nachrichten auch übersetzen, indem wir den zweiten Parameter in der Nachrichtenfunktion von Paraglide verwenden:

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

Überlegungen

Ich halte meine Lösung nicht für die beste, insbesondere da ich immer noch Astro lerne, daher kann es andere Lösungen geben. Wenn Sie davon wissen, kommentieren Sie es bitte und ich werde es versuchen :)

Vielen Dank für das Lesen dieses Artikels! Wenn Sie Fragen haben, kommentieren Sie, ich antworte gerne.