TacoTranslate verwenden
Strings übersetzen
Derzeit gibt es drei Möglichkeiten, Zeichenketten zu übersetzen: Die Translate
Komponente, der useTranslation
Hook oder das translateEntries
-Dienstprogramm.
Verwendung der Translate
Komponente.
Gibt Übersetzungen innerhalb eines span
Elements aus und unterstützt das Rendern von HTML.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Sie können den Elementtyp ändern, indem Sie beispielsweise as="p"
bei der Komponente angeben.
Verwendung des useTranslation
Hooks.
Gibt Übersetzungen als einfachen String zurück. Nützlich zum Beispiel in meta
Tags.
import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';
function Page() {
const helloWorld = useTranslation('Hello, world!');
useEffect(() => {
alert(helloWorld);
}, [helloWorld]);
return (
<title>{useTranslation('My page title')}</title>
);
}
Verwendung des translateEntries
Hilfsprogramms.
Strings auf der Serverseite übersetzen. Ihre OpenGraph Bilder aufwerten.
import {createEntry, translateEntries} from 'tacotranslate';
async function generateMetadata(locale = 'es') {
const title = createEntry({string: 'Hello, world!'});
const description = createEntry({string: 'TacoTranslate on the server'});
const translations = await translateEntries(
tacoTranslate,
{origin: 'opengraph', locale},
[title, description]
);
return {
title: translations(title),
description: translations(description)
};
}
Wie Zeichenfolgen übersetzt werden
Wenn Strings unsere Server erreichen, validieren und speichern wir sie zunächst und geben dann sofort eine maschinelle Übersetzung zurück. Während maschinelle Übersetzungen im Allgemeinen eine geringere Qualität als unsere KI-Übersetzungen aufweisen, liefern sie eine schnelle erste Antwort.
Zeitgleich starten wir einen asynchronen Übersetzungsauftrag, um eine hochwertige, hochmoderne KI-Übersetzung für Ihren String zu generieren. Sobald die KI-Übersetzung fertig ist, ersetzt sie die maschinelle Übersetzung und wird jedes Mal gesendet, wenn Sie Übersetzungen für Ihre Strings anfordern.
Wenn Sie einen String manuell übersetzt haben, haben diese Übersetzungen Vorrang und werden stattdessen zurückgegeben.
Origins verwenden
TacoTranslate-Projekte enthalten das, was wir Ursprünge nennen. Betrachten Sie sie als Einstiegspunkte, Ordner oder Gruppen für Ihre Strings und Übersetzungen.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origins ermöglichen es Ihnen, Strings in sinnvolle Container zu unterteilen. Zum Beispiel könnten Sie einen Origin für die Dokumentation und einen weiteren für Ihre Marketingseite haben.
Für eine feinere Kontrolle können Sie Origins auf Komponentenebene einrichten.
Um dies zu erreichen, sollten Sie mehrere TacoTranslate Provider verwenden innerhalb Ihres Projekts.
Bitte beachten Sie, dass derselbe String in verschiedenen Origins unterschiedliche Übersetzungen erhalten kann.
Letztendlich liegt es an Ihnen und Ihren Bedürfnissen, wie Sie Strings in Origins aufteilen. Beachten Sie jedoch, dass viele Strings innerhalb eines Origins die Ladezeiten erhöhen können.
Umgang mit Variablen
Sie sollten für dynamische Inhalte immer Variablen verwenden, z. B. Benutzernamen, Datumsangaben, E-Mail-Adressen und mehr.
Variablen in Strings werden mit doppelten geschweiften Klammern deklariert, wie {{variable}}
.
import {Translate} from 'tacotranslate/react';
function Greeting() {
const name = 'Juan';
return <Translate string="Hello, {{name}}!" variables={{name}} />;
}
import {useTranslation} from 'tacotranslate/react';
function useGreeting() {
const name = 'Juan';
return useTranslation('Hello, {{name}}!', {variables: {name}});
}
HTML-Inhalte verwalten
Standardmäßig unterstützt und rendert die Translate
Komponente HTML-Inhalte. Sie können dieses Verhalten jedoch deaktivieren, indem Sie useDangerouslySetInnerHTML
auf false
setzen.
Das Deaktivieren des HTML-Renderings wird dringend empfohlen, wenn nicht vertrauenswürdige Inhalte, etwa nutzergenerierte Inhalte, übersetzt werden.
Alle Ausgaben werden immer mit sanitize-html bereinigt, bevor sie gerendert werden.
import {Translate} from 'tacotranslate/react';
function Page() {
return (
<Translate
string={`
Welcome to <strong>my</strong> website.
I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
`}
variables={{url: 'https://tacotranslate.com'}}
useDangerouslySetInnerHTML={false}
/>
);
}
Das obige Beispiel wird als reiner Text gerendert.