Dokumentácia: Používanie TacoTranslate

Používanie TacoTranslate

Slovak

Preklad reťazcov

V súčasnosti existujú tri spôsoby, ako prekladať reťazce: komponent Translate, hák useTranslation alebo utilita translateEntries.

Použitie komponentu Translate.
Vypisuje preklady v rámci span elementu a podporuje vykresľovanie HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Typ elementu môžete zmeniť použitím napríklad as="p" na komponente.

Používanie háčika useTranslation
Vracia preklady ako obyčajný reťazec. Užitočné napríklad v meta tagoch.

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žitie utility translateEntries.
Prekladajte reťazce na strane servera. Vylepšite svoje 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)
	};
}

Keď reťazce dorazia na naše servery, najprv ich overíme a uložíme, potom okamžite vrátime strojový preklad. Hoci strojové preklady sú všeobecne nižšej kvality v porovnaní s našimi AI prekladmi, poskytujú rýchlu počiatočnú odpoveď.

Zároveň spustíme asynchrónnu úlohu prekladania, aby sme vygenerovali vysoko kvalitný, špičkový AI preklad pre váš reťazec. Akonáhle bude AI preklad pripravený, nahradí strojový preklad a bude odoslaný vždy, keď požiadate o preklady vašich reťazcov.

Ak ste reťazec preložili manuálne, tieto preklady majú prednosť a budú vrátené namiesto automatických.

Využívanie origins

Projekty TacoTranslate obsahujú to, čomu hovoríme pôvody. Môžete ich vnímať ako vstupné body, priečinky alebo skupiny pre vaše reťazce a preklady.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Originy vám umožňujú rozdeliť reťazce do zmysluplných kontajnerov. Napríklad môžete mať jeden origin pre dokumentáciu a iný pre vašu marketingovú stránku.

Pre podrobnejšiu kontrolu môžete nastaviť originy na úrovni komponentu.

Na dosiahnutie tohto zvážte použitie viacerých poskytovateľov TacoTranslate vo vašom projekte.

Upozorňujeme, že rovnaký reťazec môže v rôznych origins získať rôzne preklady.

Nakoniec, ako rozdelíte reťazce do origins, závisí od vás a vašich potrieb. Však majte na pamäti, že veľké množstvo reťazcov v jednom origin môže zvýšiť časy načítania.

Spracovanie premenných

Vždy by ste mali používať premenné pre dynamický obsah, ako sú používateľské mená, dátumy, e-mailové adresy a ďalšie.

Premenné v reťazcoch sa deklarujú pomocou dvojitých zátvoriek, naprí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

Štandardne komponent Translate podporuje a vykresľuje HTML obsah. Môžete sa však z tohto správania odhlásiť nastavením useDangerouslySetInnerHTML na false.

Vypnutie renderovania HTML sa dôrazne odporúča pri preklade nedôveryhodného obsahu, napríklad obsahu vytvoreného používateľmi.

Všetok výstup je vždy očistený pomocou sanitize-html pred zobrazení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}
		/>
	);
}

Vyššie uvedený príklad bude zobrazený ako obyčajný text.

Serverové vykresľovanie

Používanie TacoTranslate

Ako sa prekladajú reťazce

Využívanie origins

Spracovanie premenných

Správa obsahu HTML