Dokumentace: Použití TacoTranslate

Použití TacoTranslate

Czech

Překládání ř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.
Vypisuje překlady do prvku 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. Užitečné například v značkách meta.

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í translateEntries nástroje.
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ž řetězce dorazí 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ě méně kvalitní než naše překlady generované umělou inteligencí, poskytují rychlou počáteční odpověď.

Současně zahájíme asynchronní překladový úkol, který vygeneruje vysoce kvalitní, nejmodernější AI překlad pro váš řetězec. Jakmile bude AI překlad hotový, 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 přeložili ručně, 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>
	);
}

Originy vám umožňují oddělit texty do smysluplných kontejnerů. Například můžete mít jeden origin pro dokumentaci a jiný pro vaši marketingovou stránku.

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

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 stejný řetězec může v různých originách mít odlišné překlady.

Nakonec je 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 velké množství ř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 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. Můžete se však od tohoto chování odhlásit nastavením useDangerouslySetInnerHTML na false.

Důrazně se doporučuje vypnout 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 před vykreslení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.

Renderování na straně serveru

Použití TacoTranslate

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

Využití originů

Práce s proměnnými

Správa HTML obsahu