Dokumentation: Verwendung von TacoTranslate

Verwendung von TacoTranslate

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 zum Beispiel as="p" am Komponenten verwenden.

Verwendung des useTranslation Hooks.
Gibt Übersetzungen als einfachen Text 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 Zeichenfolgen auf der Serverseite. Geben Sie Ihren OpenGraph Bildern einen Leistungsschub.

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 zuerst und geben dann sofort eine maschinelle Übersetzung zurück. Obwohl maschinelle Übersetzungen in der Regel von geringerer Qualität sind als unsere KI-Übersetzungen, bieten sie eine schnelle erste Antwort.

Gleichzeitig starten wir einen asynchronen Übersetzungsauftrag, um eine hochwertige, hochmoderne KI-Übersetzung für Ihren String zu erzeugen. Sobald die KI-Übersetzung fertig ist, wird sie die maschinelle Übersetzung ersetzen und immer dann 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. 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 unterteilen. Zum Beispiel könnten Sie eine Origin für die Dokumentation und eine andere für Ihre Marketingseite haben.

Für eine präzisere Steuerung können Sie Origins auf Komponentenebene einrichten.

Um dies zu erreichen, erwägen Sie die Verwendung mehrerer TacoTranslate Provider in Ihrem Projekt.

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

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 nutzergenerierte 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 Klartext dargestellt.

Server-seitiges Rendering