Verwendung von TacoTranslate
Strings übersetzen
Derzeit gibt es drei Möglichkeiten, Strings 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 die Wiedergabe 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"
im Komponent verwenden.
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
Dienstprogramms.
Übersetzen Sie Zeichenketten auf der Serverseite. Verbessern Sie Ihre OpenGraph Bilder.
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 Zeichenketten übersetzt werden
Wenn Strings unsere Server erreichen, validieren und speichern wir sie zuerst und geben dann sofort eine maschinelle Übersetzung zurück. Während maschinelle Übersetzungen in der Regel eine geringere Qualität im Vergleich zu unseren KI-Übersetzungen aufweisen, bieten sie eine schnelle erste Antwort.
Gleichzeitig starten wir einen asynchronen Übersetzungsauftrag, um eine hochwertige, hochmoderne KI-Übersetzung für Ihren String zu erstellen. Sobald die KI-Übersetzung fertig ist, ersetzt sie die maschinelle Übersetzung und wird gesendet, wann immer Sie Übersetzungen für Ihre Strings anfordern.
Wenn Sie einen String manuell übersetzt haben, haben diese Übersetzungen Vorrang und werden stattdessen zurückgegeben.
Verwendung von Origins
TacoTranslate-Projekte enthalten das, was wir Origins nennen. Sie können diese als Einstiegspunkte, Ordner oder Gruppen für Ihre Strings und Übersetzungen betrachten.
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 eine Origin für die Dokumentation und eine andere für Ihre Marketingseite haben.
Für eine feinere Steuerung könnten Sie Origins auf der Komponentenebene einrichten.
Um dies zu erreichen, sollten Sie in Ihrem Projekt mehrere TacoTranslate Anbieter verwenden.
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 immer Variablen für dynamische Inhalte verwenden, wie z. B. Benutzernamen, Daten, E-Mail-Adressen und mehr.
Variablen in Zeichenketten werden mit doppelten 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}});
}
Verwaltung von HTML-Inhalten
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 der HTML-Darstellung wird dringend empfohlen, wenn unzuverlässige Inhalte wie von Nutzern generierte Inhalte übersetzt werden.
Alle Ausgaben werden vor der Darstellung stets mit sanitize-html bereinigt.
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 dargestellt.