Dokumentace: Používání TacoTranslate

Používání TacoTranslate

Czech

Překlad ř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.
Vykresluje 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í useTranslation hooku.
Vrací překlady jako prostý text. Užitoč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í utility translateEntries.
Překládejte řetězce na straně serveru. Posilte 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čkoliv jsou strojové překlady obecně nižší kvality než naše AI překlady, poskytují rychlou počáteční odpověď.

Současně spustíme asynchronní úlohu překladu, která vygeneruje vysoce kvalitní, nejmodernější AI překlad vašeho řetězce. 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 máte řetězec přeložený ručně, mají tyto překlady přednost a jsou místo toho vráceny.

Využití originů

Projekty TacoTranslate obsahují to, čemu říkáme origins. Můžete si je představit 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í 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 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 v různých omezeních získat různé 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 mít mnoho řetězců v jednom originu může zvýšit dobu načítání.

Práce s proměnnými

Pro dynamický obsah, například uživatelská jména, data, e-mailové adresy a další, byste měli vždy používat proměnné.

Proměnné v řetězcích 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 obsahu HTML

Ve výchozím nastavení komponenta Translate podporuje a vykresluje HTML obsah. Nicméně, můžete se této funkce vzdát nastavením useDangerouslySetInnerHTML na false.

Doporučuje se důrazně zakázat 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.

Vykreslování na straně serveru

Používání TacoTranslate

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

Využití originů

Práce s proměnnými

Správa obsahu HTML