Dokumentace: Používání TacoTranslate

Používání TacoTranslate

Czech

Překlad řetězců

V současné době jsou tři způsoby, jak překládat řetězce: komponenta Translate, hook useTranslation nebo utilita translateEntries.

Použití komponenty Translate.
Vyrenderuje překlady uvnitř 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í useTranslation hooku.
Vrací překlady jako obyčejný řetězec. Užitečné například v meta znací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. Zesilte 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, poté okamžitě vrátíme strojový překlad. Ačkoli jsou strojové překlady obvykle nižší kvality ve srovnání s našimi AI překlady, poskytují rychlou počáteční odpověď.

Současně spouštíme asynchronní úlohu překladu, která vygeneruje vysoce kvalitní, špičkový AI překlad pro váš řetězec. Jakmile bude AI překlad připraven, nahradí strojový překlad a bude odesílán pokaždé, když požádáte o překlady vašich řetězců.

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

Využití původů

Projekty TacoTranslate obsahují to, čemu říkáme původy. Můžete je vnímat jako 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 vaši marketingovou stránku.

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

K dosažení tohoto cíle zvažte použití několika poskytovatelů TacoTranslate ve vašem projektu.

Vezměte prosím na vědomí, že stejný řetězec může v různých origins 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 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é ve stringech jsou deklarovány 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 HTML obsah. Můžete se však z tohoto chování odhlásit nastavením useDangerouslySetInnerHTML na hodnotu false.

V případě překladu nedůvěryhodného obsahu, jako je obsah vytvářený uživateli, se důrazně doporučuje zakázat vykreslování HTML.

Veškerý výstup je vždy před vykreslením ošetřen 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.

Serverové vykreslování

Používání TacoTranslate

Jak jsou překládány řetězce

Využití původů

Práce s proměnnými

Správa HTML obsahu