Dokumentacja: Korzystanie z TacoTranslate

Używanie TacoTranslate

Polish

Tłumaczenie łańcuchów znaków

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

Używanie komponentu Translate.
Wyświetla tłumaczenia w elemencie span, obsługuje również 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.

Używanie useTranslation hooka.
Zwraca tłumaczenia jako zwykły tekst. 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>
	);
}

Używanie narzędzia translateEntries.
Tłumacz łańcuchy znaków 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 są tłumaczone ciągi znaków

Kiedy ciągi znaków 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 do naszych tłumaczeń AI, zapewniają szybkie pierwsze odpowiedzi.

Równocześnie inicjujemy asynchroniczne zadanie tłumaczenia, aby wygenerować wysokiej jakości, najnowocześniejsze tłumaczenie AI dla Twojego tekstu. Gdy tłumaczenie AI będzie gotowe, zastąpi tłumaczenie maszynowe i zostanie wysłane za każdym razem, gdy zażądasz tłumaczeń dla swoich tekstów.

Jeśli ręcznie przetłumaczyłeś ciąg znaków, te tłumaczenia mają pierwszeństwo i są zwracane zamiast nich.

Wykorzystywanie źródeł

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

import {TacoTranslate} from 'tacotranslate/react';

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

Origins pozwalają na oddzielenie ciągów tekstowych do sensownych kontenerów. Na przykład, możesz mieć jedno źródło dla dokumentacji, a inne dla swojej strony marketingowej.

Dla bardziej szczegółowej kontroli możesz skonfigurować origins na poziomie komponentu.

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

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

Ostatecznie to Ty decydujesz, jak podzielić teksty na origins, zgodnie z Twoimi potrzebami. Jednak pamiętaj, że posiadanie wielu tekstów w jednym origin może wydłużyć czas ładowania.

Obsługa zmiennych

Zawsze powinieneś używać zmiennych dla dynamicznych treści, 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 klamrowych, 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. Jednak możesz zrezygnować z tego zachowania, ustawiając useDangerouslySetInnerHTML na false.

Wyłączanie renderowania HTML jest zdecydowanie zalecane podczas tłumaczenia niezaufanych treści, takich jak treści generowane przez użytkowników.

Cały wynik jest zawsze oczyszczany za pomocą sanitize-html przed wyświetleniem.

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