Dokumentacja: Korzystanie z TacoTranslate

Korzystanie z TacoTranslate

Polish

Tłumaczenie ciągów

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

Używanie komponentu Translate.
Wyświetla 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 haka 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. Wzmocnij swoje obrazy 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 weryfikujemy i zapisujemy, a następnie natychmiast zwracamy tłumaczenie maszynowe. Chociaż tłumaczenia maszynowe są zazwyczaj niższej jakości w porównaniu z naszymi tłumaczeniami AI, zapewniają szybką wstępną odpowiedź.

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

Jeżeli ciąg znaków został ręcznie przetłumaczony, te tłumaczenia mają pierwszeństwo i zostaną zwrócone.

Korzystanie z originów

Projekty TacoTranslate zawierają to, co nazywamy źródłami. Pomyśl o nich jak o punktach wejścia, folderach lub grupach dla twoich tekstów i tłumaczeń.

import {TacoTranslate} from 'tacotranslate/react';

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

Originy pozwalają rozdzielać teksty na sensowne kontenery. Na przykład możesz mieć jeden origin dla dokumentacji, a inny dla strony marketingowej.

Aby uzyskać bardziej szczegółową kontrolę, możesz skonfigurować origins na poziomie komponentu.

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

Proszę pamiętać, że ten sam ciąg znaków może otrzymać różne tłumaczenia w różnych originach.

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

Obsługa zmiennych

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

Zmienne w ciągach deklaruje się przy użyciu podwójnych nawiasów, takich jak {{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 zrezygnować z tego zachowania, 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 zanim zostaną wyrenderowane.

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