Dokumentacja: Korzystanie z TacoTranslate

Korzystanie z TacoTranslate

Polish

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

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

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

Użycie 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 tłumaczone są 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 zazwyczaj cechują się niższą jakością w porównaniu z naszymi tłumaczeniami AI, zapewniają szybkie, wstępne tłumaczenie.

Jednocześnie rozpoczynamy asynchroniczne zadanie tłumaczenia, aby wygenerować wysokiej jakości, nowoczesne tłumaczenie AI dla Twojego tekstu. 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 tekstów.

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

Wykorzystywanie źródeł

Projekty TacoTranslate zawierają to, co nazywamy origins. Można je traktować jako punkty wejścia, foldery lub grupy dla Twoich ciągów tekstowych i tłumaczeń.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins pozwalają oddzielić ciągi znaków w sensowne kontenery. Na przykład możesz mieć jedno origin dla dokumentacji, a inne dla strony marketingowej.

Dla bardziej precyzyjnej kontroli możesz skonfigurować źródła na poziomie komponentu.

Aby to osiągnąć, rozważ użycie wielu dostawców TacoTranslate w ramach Twojego projektu.

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

Ostatecznie, sposób, w jaki oddzielisz ciągi znaków na originy, zależy od Ciebie i Twoich potrzeb. Jednak pamiętaj, że umieszczenie wielu ciągów w jednym originie 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 tekstach 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 zrezygnować z tego zachowania, ustawiając useDangerouslySetInnerHTML na false.

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

Wszystkie dane wyjściowe są zawsze oczyszczane za pomocą sanitize-html przed ich 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