Překlad řetězců

Aktuálně existují tři způsoby, jak překládat řetězce: komponenta Translate, hook useTranslation nebo utilita translateEntries.

Použití komponenty Translate.
Vykresluje překlady uvnitř elementu span, a podporuje vykreslování HTML.

import {Translate} from 'tacotranslate/react';

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

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

Použití useTranslation hooku.
Vrací překlady jako obyčejný řetězec. Užitoč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. Zrychlete své 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 jsou řetězce překládány

Když řetězce dorazí na naše servery, nejprve je ověříme a uložíme, poté okamžitě vrátíme strojový překlad. Ačkoliv jsou strojové překlady obecně nižší kvality oproti našim AI překladům, poskytují rychlou počáteční odpověď.

Současně zahajujeme asynchronní úlohu překladu, která vygeneruje vysoce kvalitní, špičkový AI překlad pro váš řetězec. Jakmile je AI překlad připraven, nahradí strojový překlad a bude odeslán vždy, když vyžádáte překlady svých řetězců.

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

Využívání originů

Projekty TacoTranslate obsahují to, čemu říkáme origins. Představte si je jako 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 detailnější kontrolu můžete nastavit origins na úrovni komponenty.

K dosažení tohoto cíle 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 záleží na vás a vašich potřebách, jak rozdělíte řetězce do originů. Mějte však na paměti, že mít mnoho řetězců v jednom originu může zvýšit doby 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 obsah HTML. Můžete se však od tohoto chování odhlásit nastavením useDangerouslySetInnerHTML na false.

Zakázání vykreslování HTML se důrazně doporučuje při překládání nedůvěryhodného obsahu, jako je obsah vytvářený uživateli.

Veškerý výstup je před zobrazením vždy očištěn 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 vykreslen jako prostý text.