Dokumentace: Používání TacoTranslate

Používání TacoTranslate

Czech

Překlad řetězců

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

Použití komponenty Translate.
Vypisuje překlady v rámci span elementu 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í useTranslation hooku.
Vrací překlady jako prostý text. Užiteč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í nástroje translateEntries.
Překládejte řetězce na straně serveru. Zesilte 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)
	};
}

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čkoli jsou strojové překlady obvykle nižší kvality ve srovnání s našimi AI překlady, poskytují rychlou počáteční odpověď.

Současně zahajujeme asynchronní překladatelskou ú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 svých řetězců.

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

Využívání originů

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

import {TacoTranslate} from 'tacotranslate/react';

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

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 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 originálních zdrojích získat různé 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 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é ve stringech jsou deklarovány pomocí dvojitých závorek, například {{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}});
}

Správa obsahu HTML

Ve výchozím nastavení komponenta Translate podporuje a vykresluje HTML obsah. Můžete se však z tohoto chování odhlásit nastavením useDangerouslySetInnerHTML na hodnotu false.

Zakázání vykreslování HTML se důrazně doporučuje 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 sanitized 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.

Renderování na straně serveru

Používání TacoTranslate

Jak jsou překládány řetězce

Využívání originů

Zpracování proměnných

Správa obsahu HTML