Dokumentation: Verwendung von TacoTranslate

TacoTranslate verwenden

German

Strings übersetzen

Derzeit gibt es drei Möglichkeiten, Zeichenketten zu übersetzen: die Translate Komponente, der useTranslation Hook oder die translateEntries-Hilfsfunktion.

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" an der Komponente 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.
Zeichenketten auf dem Server übersetzen. Machen Sie Ihre OpenGraph Bilder leistungsfähiger.

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

Wenn Strings unsere Server erreichen, validieren und speichern wir sie zuerst und geben dann umgehend eine maschinelle Übersetzung zurück. Maschinelle Übersetzungen sind in der Regel qualitativ geringer als unsere KI-Übersetzungen, bieten jedoch eine schnelle erste Antwort.

Gleichzeitig starten wir einen asynchronen Übersetzungsauftrag, um eine hochwertige, hochmoderne KI-Übersetzung für Ihre Zeichenfolge zu erzeugen. Sobald die KI-Übersetzung fertig ist, ersetzt sie die maschinelle Übersetzung und wird jedes Mal gesendet, wenn Sie Übersetzungen für Ihre Zeichenfolgen anfordern.

Wenn Sie eine Zeichenkette manuell übersetzt haben, haben diese Übersetzungen Vorrang und werden stattdessen zurückgegeben.

Origins verwenden

TacoTranslate-Projekte enthalten das, was wir origins 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 eine Origin für die Dokumentation und eine andere für Ihre Marketingseite haben.

Für feinere Kontrolle könnten Sie Origins auf Komponentenebene einrichten.

Um dies zu erreichen, sollten Sie in Ihrem Projekt mehrere TacoTranslate Provider verwenden.

Bitte beachten Sie, dass derselbe String in verschiedenen Origins unterschiedlich übersetzt werden kann.

Letztendlich liegt es an Ihnen und Ihren Anforderungen, 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, z. B. für 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 der HTML‑Darstellung wird dringend empfohlen, wenn nicht vertrauenswürdige Inhalte übersetzt werden, wie zum Beispiel nutzergenerierte Inhalte.

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.

Serverseitiges Rendering

TacoTranslate verwenden

Wie Strings übersetzt werden

Origins verwenden

Umgang mit Variablen

HTML-Inhalte verwalten