Astro

Integrieren Sie i1n mit Astro für statische und serverseitig gerenderte mehrsprachige Websites.

Einrichtung

Führen Sie i1n init in Ihrem Astro-Projekt aus. Die CLI konfiguriert das verschachtelte JSON-Format im Verzeichnis locales/. Astro-Projekte verwenden typischerweise das i1n SDK im Standalone-Modus.

Erstellen Sie ein Utility-Modul (z. B. src/i18n/index.ts), das i18n initialisiert und eine useTranslations()-Funktion exportiert. Diese Funktion lädt die entsprechenden Locale-Ressourcen und gibt die typsichere t()-Funktion zurück.

Verwendung

Rufen Sie in Ihren .astro-Seiten useTranslations(locale) im Frontmatter auf, um die t()-Funktion zu erhalten. Verwenden Sie diese, um übersetzte Zeichenfolgen in Ihren Vorlagen darzustellen. Da Astro-Komponenten zur Build-Zeit ausgeführt werden, werden Übersetzungen statisch in das generierte HTML eingebettet.

Organisieren Sie Übersetzungen nach Namensräumen (z. B. common.json, home.json, docs.json), um Dateien überschaubar zu halten. Verwenden Sie getLocalePath(locale, path), um sprachgebietsbezogene URLs für die interne Navigation zu generieren.

Statische Generierung

Verwenden Sie getStaticPaths(), um Seiten für alle unterstützten Gebietsschemata zu generieren. Jede Gebietsschema-Variante wird als separate HTML-Seite erstellt, was eine schnelle Ladezeit und eine optimale SEO mit korrekten hreflang-Tags gewährleistet.

Fügen Sie i1n pull zu Ihrem Build-Schritt hinzu, um sicherzustellen, dass die Übersetzungsdateien vor der statischen Generierung synchronisiert sind. Der Build-Prozess von Astro generiert dann automatisch alle Sprachvarianten.

Bridge-Modus

Astro-Projekte verwenden normalerweise das i1n SDK direkt anstelle einer externen i18n-Bibliothek. Wenn Sie jedoch eine Framework-Integration verwenden (z. B. React-Komponenten in Astro), können Sie den Bridge-Modus innerhalb dieser Framework-Inseln verwenden.

Für React-Inseln: registerI1n((key, params) => i18next.t(key, params)). Für Vue-Inseln: registerI1n((key, params) => i18n.global.t(key, params)). Die Astro-Shell und die Framework-Inseln können jeweils ihren bevorzugten Ansatz verwenden.

src/i18n/index.ts

import { init, t as i1nT } from 'i1n'

export function useTranslations(locale: string) {
  init({
    locale,
    resources: loadResources(locale)
  })
  return i1nT
}

Verwandt

Armaturenbrett

Leitfaden für das i1n-Web-Dashboard: Kontoerstellung, Organisationen, API-Schlüssel, Übersetzungsbearbeitung und Teamverwaltung.

Bridge-Modus

Behalten Sie Ihre bestehende i18n-Bibliothek bei und fügen Sie gleichzeitig die typsichere Autovervollständigung, KI-Übersetzung und Dateiverwaltung von i1n hinzu.