Dokumentacja: Używanie TacoTranslate

Korzystanie z TacoTranslate

Polish

Tłumaczenie ciągów znaków

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

Korzystanie z komponentu Translate.
Wyświetla tłumaczenia wewnątrz elementu 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.

Korzystanie z hooka useTranslation.
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>
	);
}

Korzystanie z 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

Gdy ciągi znaków dotrą do naszych serwerów, najpierw je weryfikujemy i zapisujemy, a następnie natychmiast zwracamy tłumaczenie maszynowe. Chociaż tłumaczenia maszynowe zwykle są gorszej jakości w porównaniu z naszymi tłumaczeniami AI, zapewniają szybką wstępną odpowiedź.

Równocześnie uruchamiamy asynchroniczne zadanie tłumaczeniowe, aby wygenerować wysokiej jakości, nowoczesne tłumaczenie AI dla Twojego ciągu znaków. 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 znaków.

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

Wykorzystywanie origins

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 rozdzielenie ciągów znaków na znaczące kontenery. Na przykład, możesz mieć jeden origin dla dokumentacji, a inny 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.

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

Ostatecznie, to jak rozdzielisz ciągi znaków na źródła zależy od Ciebie i Twoich potrzeb. Jednak pamiętaj, że posiadanie wielu ciągów w jednym źródle 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 są deklarowane 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łączenie renderowania HTML jest zdecydowanie zalecane 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 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