Překládání řetězců

V současné době existují tři způsoby, jak přeložit řetězce: komponenta Translate, hook useTranslation nebo utilita translateEntries.

Použití komponenty Translate.
Vypisuje překlady uvnitř prvku span a podporuje vykreslování HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Typ elementu můžete změnit například pomocí as="p" na komponentě.

Použití hooku useTranslation.
Vrací překlady jako prostý text. Užitečné například v meta značkách.

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>
	);
}

Použití utility translateEntries.
Překládejte řetězce na straně serveru. Získáte tak výkonnější OpenGraph obrázky.

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 se překládají řetězce

Když se řetězce dostanou na naše servery, nejprve je ověříme a uložíme, poté okamžitě vrátíme strojový překlad. I když jsou strojové překlady obecně méně kvalitní ve srovnání s našimi překlady AI, poskytují rychlou počáteční odpověď.

Současně spouštíme asynchronní překladovou úlohu, která vygeneruje vysoce kvalitní, nejmodernější AI překlad vašeho řetězce. Jakmile bude AI překlad připraven, nahradí strojový překlad a bude odesílán vždy, když požádáte o překlady vašich řetězců.

Pokud jste řetězec přeložili ručně, mají tyto překlady přednost a jsou místo toho vráceny.

Využití původů

Projekty TacoTranslate obsahují to, čemu říkáme origins. Můžete je považovat za vstupní body, složky nebo skupiny pro vaše řetězce a překlady.

Origins vám umožňují oddělit řetězce do smysluplných kontejnerů. Například můžete mít jeden origin pro dokumentaci a jiný pro vaši marketingovou stránku.

Pro podrobnější kontrolu můžete nastavit originy na úrovni komponenty.

K tomu zvažte použití více poskytovatelů TacoTranslate ve vašem projektu.

Vezměte prosím na vědomí, že stejný řetězec může v různých origins obdržet odlišné překlady.

Nakonec je na vás a vašich potřebách, jak rozdělíte řetězce do originů. Však mějte na paměti, že mnoho řetězců v jednom originu může zvýšit dobu načítání.

Zpracování proměnných

Vždy byste měli používat proměnné pro dynamický obsah, jako jsou uživatelská jména, data, e-mailové adresy a další.

Proměnné v řetězcích jsou deklarovány pomocí dvojitých závorek, například {{variable}}.

Správa obsahu HTML

Ve výchozím nastavení komponenta Translate podporuje a vykresluje HTML obsah. Nicméně, můžete se této funkce vzdát nastavením useDangerouslySetInnerHTML na false.

Důrazně se doporučuje zakázat vykreslování HTML při překladu nedůvěryhodného obsahu, jako je obsah vytvořený uživateli.

Veškerý výstup je před vykreslením vždy ošetřen pomocí sanitize-html.

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}
		/>
	);
}

Výše uvedený příklad bude zobrazen jako prostý text.