Překlad řetězců

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

Použití komponenty Translate.
Vypisuje 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í atributu as="p" na komponentě.

Použití useTranslation hooku.
Vrací překlady jako prostý text. Užitočné například v meta tagá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. I když jsou strojové překlady obecně nižší kvality ve srovnání s našimi AI překlady, poskytují rychlou počáteční odpověď.

Současně zahajujeme asynchronní překladatelský úkol, jehož cílem je vytvořit 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ě, tyto překlady mají přednost a jsou místo toho vráceny.

Využívání původů

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

Origins vám umožňují rozdě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 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 tentýž řetězec může v různých originatech obdržet různé překlady.

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

Práce s proměnnými

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 renderuje HTML obsah. Nicméně, můžete se tohoto chování vzdát nastavením useDangerouslySetInnerHTML na false.

Doporučuje se zakázat vykreslování HTML při překladu nedůvěryhodného obsahu, například obsahu vytvořeného uživateli.

Veškerý výstup je vždy před vykreslením 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.