Dokumentation: Verwendung von TacoTranslate

TacoTranslate verwenden

German

Übersetzen von Zeichenketten

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" am 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. Verleihen Sie Ihren OpenGraph Bildern mehr Power.

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 Zeichenketten unsere Server erreichen, validieren und speichern wir sie zunächst und geben dann sofort eine maschinelle Übersetzung zurück. Zwar sind maschinelle Übersetzungen im Allgemeinen von geringerer Qualität im Vergleich zu unseren KI-Übersetzungen, jedoch bieten sie eine schnelle erste Antwort.

Gleichzeitig starten wir einen asynchronen Übersetzungsauftrag, um eine hochwertige, moderne KI-Übersetzung für Ihren Text zu erstellen. Sobald die KI-Übersetzung fertig ist, ersetzt sie die maschinelle Übersetzung und wird gesendet, wann immer Sie Übersetzungen für Ihre Texte anfordern.

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

Verwendung von Origins

TacoTranslate-Projekte enthalten, was wir Origins nennen. Sie können diese als Einstiegspunkte, Ordner oder Gruppen für Ihre Zeichenketten 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 trennen. Zum Beispiel könnten Sie einen Origin für die Dokumentation und einen anderen für Ihre Marketing-Seite haben.

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

Um dies zu erreichen, sollten Sie in Erwägung ziehen, mehrere TacoTranslate Anbieter in Ihrem Projekt zu 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 eine große Anzahl von Strings innerhalb eines Origins die Ladezeiten erhöhen kann.

Umgang mit Variablen

Sie sollten immer Variablen für dynamische Inhalte verwenden, wie zum Beispiel Benutzernamen, Daten, E-Mail-Adressen und mehr.

Variablen in Zeichenketten 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}});
}

Verwalten 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 Sie nicht vertrauenswürdige Inhalte übersetzen, wie z. B. von Nutzern erzeugte Inhalte.

Alle Ausgaben werden vor der Darstellung immer 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 Klartext dargestellt.

Serverseitiges Rendering