Seiten in Astro übersetzen

Sie übersetzen eine Astro-Seite, indem Sie ihren Text in t() und ihre internen Links in href() einschließen, die beide aus Astro.locals gelesen werden. Alles läuft auf dem Server, und eine Seitendatei bedient jede Sprache.

Bevor Sie beginnen

• Die Integration ist installiert und <UniversallyHead /> befindet sich in Ihrem Layout. Siehe Astro-Integration installieren.
• Das Projekt hat mindestens eine Zielsprache, bei der der Schalter Live aktiviert ist.

Text mit t() übersetzen

1. t aus Astro.locals im Frontmatter der Seite lesen.
2. Jedes Textstück übergeben.

---
const { t } = Astro.locals;
---

<h1>{t('About us')}</h1>
<p>{t('We translate websites.')}</p>

t() nimmt Ihren Quelltext und gibt den Text für die gerade gerenderte Sprache zurück. Der Quelltext ist der Schlüssel, daher muss die Zeichenfolge in Ihrem Code exakt mit der Quellzeichenfolge im Dashboard übereinstimmen. Ein zusätzliches Leerzeichen oder ein geändertes Komma macht sie zu einer anderen Zeichenfolge.

Eine Zeichenfolge ohne Übersetzung gibt den Quelltext zurück, sodass eine Seite niemals abstürzt, während eine Übersetzung unterwegs ist. Die Zeichenfolge wird einmal aufgezeichnet und nach der Antwort gemeldet. Auf Seiten in der Quellsprache gibt t() sein Argument ohne Nachschlagen und ohne Meldung zurück.

Rufen Sie niemals t('') auf. Der Übersetzer lehnt eine leere Zeichenfolge ab, und diese Meldung schlägt mit einem protokollierten Fehler fehl.

Links mit href() lokalisieren

1. href aus Astro.locals lesen.
2. Jeden internen Pfad umschließen.

---
const { t, href } = Astro.locals;
---

<a href={href('/pricing')}>{t('See pricing')}</a>

Auf einer französischen Seite wird /pricing zu /fr/pricing, und die Abfragezeichenfolge sowie der Hash bleiben erhalten. In der Quellsprache wird der Pfad unverändert zurückgegeben, da die Quellsprache ohne Präfix bedient wird.

href() gibt auch Folgendes unverändert zurück:

• eine leere Zeichenfolge
• protokollrelative URLs, die mit // beginnen
• alles, was nicht mit / beginnt: https: und mailto: Links, tel: Links, #fragment, ?query und relative Pfade
• ein Pfad, der bereits das Präfix trägt, wie z. B. /fr oder /fr/pricing, sodass ein zweimaliges Aufrufen keinen Schaden anrichtet

Aktuelle Sprache lesen

Astro.locals.lang enthält den Variantencode der gerade gerenderten Sprache in Kleinbuchstaben: fr für Französisch (Frankreich), es-419 für Spanisch (Mexiko) und en-us auf einer englischen (US) Quellseite. Astro.locals enthält lang, t und href und nichts weiter.

Inline-HTML in t() beibehalten

Einfache <strong> und <em> Tags können im String verbleiben. Rendern Sie das Ergebnis mit set:html:

---
const { t } = Astro.locals;
---

<p set:html={t('Wrap text in <strong>t()</strong> and keep your <em>markup</em> intact.')} />

Ein String, der ein Tag enthält, wird vor der Übersetzung normalisiert: Attribute auf Inline-Tags werden durch Marker ersetzt, und img- und svg-Elemente werden geleert. Halten Sie Strings auf reinen Text oder auf <strong> und <em> ohne Attribute beschränkt.

<a> außerhalb von t() beibehalten:

---
const { t, href } = Astro.locals;
---

<p>{t('Compare every plan.')} <a href={href('/pricing')}>{t('See pricing')}</a></p>

Die URL des Links gehört zu einer Sprache, daher muss href() sie erstellen. Eine URL im Quelltext macht auch den Schlüssel auf jeder Seite anders, die woanders hin verlinkt, was eine Übersetzung in viele aufteilt.

Übersetzten Text an Inseln übergeben

Es gibt kein clientseitiges t(). Eine Komponente, die im Browser hydriert, erhält übersetzten Text nur als Props aus der .astro-Datei:

---
import Counter from '../components/Counter.tsx';

const { t } = Astro.locals;
---

<Counter client:load label={t('Add one')} />

Eine statische Website übersetzen

Mit output: 'static' erfolgt die Übersetzung während des Builds:

1. Führen Sie den Build aus. Er lädt jede Sprache, rendert jede Seite einmal und sendet dann jede Zeichenfolge, die er nicht hatte, in einem Aufruf.
2. Lesen Sie das Ende des Protokolls. Wenn etwas neu war, wird eine Zeile wie 12 neue Zeichenfolgen übersetzt. Bauen Sie neu, um sie einzuschließen. ausgegeben.
3. Führen Sie den Build erneut aus. Die neuen Zeichenfolgen befinden sich jetzt im HTML.

Eine statische Website hat keinen Servercode, der nach dem Build ausgeführt wird. Dashboard-Bearbeitungen erreichen sie erst, wenn Sie neu erstellen und erneut bereitstellen, wie in Übersetzungsaktualisierungen in Astro beschrieben.

Überprüfen Sie, ob es funktioniert hat

Öffnen Sie eine Seite unter einem Zielpräfix, z. B. /fr/about. Text, den Sie in t() eingeschlossen haben, wird nach einem Neuladen übersetzt angezeigt, und Links, die mit href() erstellt wurden, zeigen auf /fr/-Pfade. Text, den Sie nicht eingeschlossen haben, bleibt in Ihrer Quellsprache: Nichts auf der Seite wird übersetzt, es sei denn, es durchläuft t().

Wenn es nicht funktioniert

• Eine Zeichenfolge bleibt in der Quellsprache, während der Rest übersetzt wird: Ihr Schlüssel stimmt nicht mit dem Dashboard überein. Vergleichen Sie das Argument von t() mit der Quellzeichenfolge, Zeichen für Zeichen.
• Jede Zeichenfolge bleibt in der Quellsprache: Überprüfen Sie das Serverprotokoll auf word limit reached. Siehe Fehlerbehebung bei der Astro-Integration.