Dokumentace: Používání TacoTranslate

Používání TacoTranslate

Czech

Překlad řetězců

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

Použití komponenty Translate.
Zobrazuje překlady v 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 prostý řetězec. 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. Vylepšete 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ž k našim serverům dorazí řetězce, nejprve je ověříme a uložíme, a poté okamžitě vrátíme strojový překlad. Strojové překlady jsou obecně nižší kvality ve srovnání s našimi AI překlady, ale poskytují rychlou počáteční odpověď.

Současně spouštíme asynchronní překladovou úlohu, která vygeneruje vysoce kvalitní, nejmodernější AI překlad pro váš řetězec. 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 řetězec ručně přeložili, tyto překlady mají přednost a budou místo toho vráceny.

Využití originů

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.

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 marketingovou stránku.

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

Chcete-li toho dosáhnout, zvažte použití více poskytovatelů TacoTranslate ve svém projektu.

Vezměte prosím na vědomí, že tentýž řetězec může mít v různých originách 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 mnoho řetězců v jednom originu může zvýšit dobu načítání.

Práce s proměnnými

Pro dynamický obsah byste měli vždy používat proměnné, například uživatelská jména, data, e-mailové adresy a další.

Proměnné v řetězcích se deklarují 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. Toto chování však můžete vypnout nastavením useDangerouslySetInnerHTML na false.

Důrazně se doporučuje vypnout vykreslování HTML při překládání nedůvěryhodného obsahu, například uživatelského obsahu.

Veškerý výstup je vždy očištěn pomocí sanitize-html před vykreslením.

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.

Vykreslování na straně serveru

Používání TacoTranslate

Jak se překládají řetězce

Využití originů

Práce s proměnnými

Správa obsahu HTML