Dokumentation: Verwendung von TacoTranslate

TacoTranslate verwenden

German

Strings übersetzen

Es gibt derzeit drei Möglichkeiten, Strings zu übersetzen: die Translate Komponente, der useTranslation Hook oder das translateEntries-Utility.

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 setzen.

Verwendung des useTranslation Hooks.
Gibt Übersetzungen als einfachen String zurück. Nützlich beispielsweise 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.
Übersetze Zeichenketten auf der Serverseite. Mache deine 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 zunächst und geben dann sofort eine maschinelle Übersetzung zurück. Maschinelle Übersetzungen sind zwar im Allgemeinen qualitativ schlechter als unsere KI-Übersetzungen, liefern jedoch 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 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.

Verwendung von Origins

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, Textbausteine in sinnvolle Container zu gliedern. Zum Beispiel könnten Sie ein Origin für die Dokumentation und ein anderes für Ihre Marketingseite haben.

Für eine granulare Kontrolle können Sie Origins auf Komponentenebene einrichten.

Um dies zu erreichen, erwägen Sie, innerhalb Ihres Projekts mehrere TacoTranslate Provider zu verwenden.

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

Wie Sie Strings in Origins aufteilen, hängt letztendlich von Ihnen und Ihren Bedürfnissen ab. Beachten Sie jedoch, dass viele Strings in einem Origin die Ladezeiten erhöhen können.

Umgang mit Variablen

Sie sollten immer Variablen für dynamische Inhalte verwenden, z. B. Benutzernamen, Daten, E‑Mail‑Adressen und mehr.

Variablen in Strings werden mit doppelten geschweiften Klammern deklariert, zum Beispiel {{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.

Es wird dringend empfohlen, das Rendern von HTML zu deaktivieren, wenn Sie nicht vertrauenswürdige Inhalte wie nutzergenerierte Inhalte übersetzen.

Alle Ausgaben werden stets 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

Verwendung von Origins

Umgang mit Variablen

HTML-Inhalte verwalten