Dokumentace: Použití 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 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 meta značká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ž řetězce dorazí na naše servery, nejprve je ověříme a uložíme, a poté okamžitě vrátíme strojový překlad. Ačkoli jsou strojové překlady obecně nižší kvality než naše překlady generované AI, poskytují rychlou počáteční odpověď.

Současně zahajujeme asynchronní překladový úkol, 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 vašich řetězců.

Pokud jste řetězec přeložili ručně, mají tyto překlady 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í oddě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 jemnější kontrolu můžete nastavit origins na úrovni komponenty.

K tomu 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 originách obdržet 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 mít mnoho řetězců v jednom originu může prodloužit dobu načítání.

Práce s proměnnými

Měli byste vždy 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 složený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 HTML obsah. Můžete se mu však vyhnout nastavením useDangerouslySetInnerHTML na false.

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

Veškerý výstup je vždy před vykreslením sanitizová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 zobrazen 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 HTML obsahu