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, hook useTranslation, alebo utilita translateEntries.

Použitie komponentu Translate.
Vypisuje preklady do elementu span, a podporuje vykresľovanie HTML.

import {Translate} from 'tacotranslate/react';

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

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

Používanie háku useTranslation.
Vracia preklady ako obyčajný reťazec. Užitočné naprí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žívanie nástroja 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ď sa reťazce dostanú na naše servery, najprv ich overíme a uložíme, potom okamžite vrátime strojový preklad. Hoci sú strojové preklady 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 prekladu, ktorá vygeneruje vysoko kvalitný, najmodernejší AI preklad vášho textu. Keď bude AI preklad pripravený, nahradí strojový preklad a bude odosielaný vždy, keď požiadate o preklady vašich reťazcov.

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

Využívanie pôvodov

Projekty TacoTranslate obsahujú to, čomu hovoríme origins. Predstavte si ich 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 by ste mohli mať jeden origin pre dokumentáciu a iný pre svoju marketingovú stránku.

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

Aby ste to dosiahli, zvážte použitie viacerých poskytovateľov TacoTranslate vo vašom projekte.

Upozorňujeme, že ten istý reťazec môže mať v rôznych originách rôzne preklady.

V konečnom dôsledku záleží na vás a vašich potrebách, ako rozdelíte reťazce medzi pôvody. Upozorňujeme však, že mať veľa reťazcov v jednom pôvode môže predĺžiť dobu načítania.

Práca s premennými

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 HTML obsahu

Predvolene komponent Translate podporuje a vykresľuje HTML obsah. Môžete však toto správanie vypnúť nastavením useDangerouslySetInnerHTML na false.

Dôrazne sa odporúča vypnúť vykresľovanie HTML pri prekladaní nedôveryhodného obsahu, napríklad obsahu vytvoreného používateľmi.

Všetok výstup je vždy pred zobrazením sanitizovaný pomocou 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}
		/>
	);
}

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

Vykresľovanie na strane servera

Používanie TacoTranslate

Ako sa prekladajú reťazce

Využívanie pôvodov

Práca s premennými

Správa HTML obsahu