Dokumentacja: Korzystanie z TacoTranslate

Korzystanie z TacoTranslate

Polish

Tłumaczenie ciągów znaków

Obecnie istnieją trzy sposoby tłumaczenia ciągów: komponent Translate, hook useTranslation, lub narzędzie translateEntries.

Korzystanie z komponentu Translate.
Umieszcza tłumaczenia w elemencie span i obsługuje renderowanie HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Możesz zmienić typ elementu, używając na przykład as="p" w komponencie.

Korzystanie z hooka useTranslation.
Zwraca tłumaczenia jako zwykły ciąg znaków. Przydatne na przykład w tagach meta.

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

Korzystanie z narzędzia translateEntries.
Tłumacz teksty po stronie serwera. Zwiększ możliwości swoich obrazów OpenGraph.

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

Jak tłumaczone są ciągi znaków

Kiedy teksty docierają do naszych serwerów, najpierw je walidujemy i zapisujemy, a następnie natychmiast zwracamy tłumaczenie maszynowe. Choć tłumaczenia maszynowe są zazwyczaj niższej jakości niż nasze tłumaczenia AI, zapewniają szybką wstępną odpowiedź.

Jednocześnie uruchamiamy asynchroniczne zadanie tłumaczeniowe, aby wygenerować wysokiej jakości, najnowocześniejsze tłumaczenie AI dla twojego ciągu. Gdy tłumaczenie AI będzie gotowe, zastąpi tłumaczenie maszynowe i będzie wysyłane za każdym razem, gdy poprosisz o tłumaczenia swoich ciągów.

Jeśli dany ciąg został przetłumaczony ręcznie, te tłumaczenia mają pierwszeństwo i zostaną zwrócone.

Korzystanie z originów

Projekty TacoTranslate zawierają to, co nazywamy originami. Traktuj je jak punkty wejścia, foldery lub grupy dla twoich tekstów i tłumaczeń.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Origins pozwalają rozdzielić ciągi znaków na sensowne kontenery. Na przykład możesz mieć jeden origin dla dokumentacji i inny dla strony marketingowej.

Aby uzyskać bardziej precyzyjną kontrolę, możesz skonfigurować origins na poziomie komponentu.

Aby to osiągnąć, rozważ użycie wielu dostawców TacoTranslate w swoim projekcie.

Zwróć uwagę, że ten sam tekst może mieć różne tłumaczenia w różnych źródłach.

Ostatecznie to, jak rozdzielisz teksty na originy, zależy od Ciebie i Twoich potrzeb. Jednak pamiętaj, że umieszczanie wielu tekstów w jednym originie może wydłużyć czas ładowania.

Obsługa zmiennych

Zawsze należy używać zmiennych dla treści dynamicznych, takich jak nazwy użytkowników, daty, adresy e-mail i inne.

Zmienne w ciągach znaków deklaruje się za pomocą podwójnych nawiasów, na przykład {{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}});
}

Zarządzanie zawartością HTML

Domyślnie komponent Translate obsługuje i renderuje zawartość HTML. Możesz jednak wyłączyć to zachowanie, ustawiając useDangerouslySetInnerHTML na false.

Zdecydowanie zaleca się wyłączenie renderowania HTML podczas tłumaczenia niezaufanych treści, takich jak treści generowane przez użytkowników.

Wszystkie dane wyjściowe są zawsze oczyszczane za pomocą sanitize-html przed renderowaniem.

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

Powyższy przykład zostanie wyrenderowany jako zwykły tekst.

Renderowanie po stronie serwera