Dokumentace: Použití TacoTranslate

Používání TacoTranslate

Czech

Překlad řetězců

V současnosti 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 do elementu 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ý řetězec. Hodí se například do meta tagů.

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. Vylepšete své obrázky OpenGraph.

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ž se řetězce dostanou na naše servery, nejprve je ověříme a uložíme, a 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ě spouštíme asynchronní překladový úkol, který vygeneruje vysoce kvalitní, nejmodernější AI překlad pro váš řetězec. Až bude AI překlad připraven, nahradí strojový překlad a bude odesílán vždy, když požádáte o překlad svých řetězců.

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

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

Původy vám umožňují rozdělit řetězce do smysluplných kontejnerů. Například můžete mít jeden původ pro dokumentaci a jiný pro marketingovou stránku.

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

Chcete-li toho dosáhnout, 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 mít v různých originách odlišné překlady.

Konečné rozhodnutí o tom, jak rozdělit řetězce do originů, záleží na vás a na vašich potřebách. Mějte však na paměti, že velké množství řetězců v jednom originu může prodlouž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 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 HTML obsahu

Ve výchozím nastavení komponenta Translate podporuje a vykresluje obsah HTML. Toto chování však můžete vypnout nastavením useDangerouslySetInnerHTML na false.

Důrazně se doporučuje zakázat vykreslování HTML při překladu nedůvěryhodného obsahu, například obsahu generované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.

Vykreslování na straně serveru

Používání TacoTranslate

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

Použití originů

Práce s proměnnými

Správa HTML obsahu