Dokumentacja: Korzystanie z TacoTranslate

Korzystanie z TacoTranslate

Polish

Tłumaczenie łańcuchó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 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 hooka 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>
	);
}

Używanie narzędzia translateEntries.
Tłumacz ciągi znaków po stronie serwera. Ulepsz 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

Gdy ciągi trafiają na nasze serwery, najpierw je weryfikujemy i zapisujemy, a następnie natychmiast zwracamy tłumaczenie maszynowe. Chociaż tłumaczenia maszynowe zazwyczaj są niższej jakości niż nasze tłumaczenia AI, zapewniają szybką, wstępną odpowiedź.

Jednocześnie uruchamiamy asynchroniczne zadanie tłumaczeniowe, 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 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 jako punkty wejścia, foldery lub grupy dla Twoich tekstów i tłumaczeń.

import {TacoTranslate} from 'tacotranslate/react';

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

Pochodzenia pozwalają pogrupować ciągi tekstowe w sensowne kontenery. Na przykład możesz mieć jedno pochodzenie dla dokumentacji, a inne dla swojej strony marketingowej.

Dla bardziej precyzyjnej kontroli możesz skonfigurować origins na poziomie komponentu.

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

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

Ostatecznie to, jak podzielisz ciągi na originy, zależy od Ciebie i Twoich potrzeb. Pamiętaj jednak, że umieszczenie wielu ciągów w jednym originie 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 zawartość HTML. Jednak możesz zrezygnować z tego zachowania, ustawiając useDangerouslySetInnerHTML na false.

Zdecydowanie zaleca się wyłączenie renderowania HTML podczas tłumaczenia niezaufanej zawartości, takiej jak treści generowane przez użytkowników.

Wszystkie dane wyjściowe są zawsze oczyszczane przy użyciu sanitize-html przed wyrenderowaniem.

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