Dokumentacja: Korzystanie z TacoTranslate

Korzystanie z TacoTranslate

Polish

Tłumaczenie ciągów

Obecnie istnieją trzy sposoby tłumaczenia łańcuchów znaków: komponent Translate, hook useTranslation, oraz narzędzie translateEntries.

Używanie komponentu Translate.
Wyświetla tłumaczenia wewnątrz elementu 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 useTranslation hooka.
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 ciągi znaków po stronie serwera. Wznieś swoje obrazy OpenGraph na wyższy poziom.

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 trafiają na nasze serwery, 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 AI dla Twojego tekstu. Kiedy tłumaczenie AI będzie gotowe, zastąpi ono tłumaczenie maszynowe i zostanie przesłane za każdym razem, gdy poprosisz o tłumaczenia swoich tekstó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 ciągów tekstowych i tłumaczeń.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins pozwalają rozdzielać teksty na sensowne grupy. Na przykład możesz mieć jedno źródło dla dokumentacji, a inne dla strony marketingowej.

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

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

Należy pamiętać, że ten sam tekst może otrzymać różne tłumaczenia w różnych źródłach.

Ostatecznie to, jak rozdzielisz strings na origins, zależy od ciebie i twoich potrzeb. Pamiętaj jednak, że umieszczenie wielu strings w jednym origin 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ę przy użyciu 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 treść 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 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