Dokumentace: Používání TacoTranslate

Používání TacoTranslate

Czech

Překládání řetězců

V současné době 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 uvnitř 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 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ž naše servery obdrží řetězce, 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 vytvořené umělou inteligencí, 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. Jakmile bude AI překlad připraven, nahradí strojový překlad a bude zasílán, kdykoli 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 originy. 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í 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 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 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ů. Všimněte si však, ž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, 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 HTML obsahu

Ve výchozím nastavení komponenta Translate podporuje a vykresluje obsah HTML. Pokud si přejete toto chování vypnout, nastavte 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 obsahu vytvořeného uživateli.

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.

Renderová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