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.
Zobrazuje preklady v elemente span a podporuje renderovanie 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žitie useTranslation hooku.
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 nástroja translateEntries.
Prekladajte reťazce na serverovej strane. 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, a potom okamžite vrátime strojový preklad. Hoci strojové preklady majú všeobecne nižšiu kvalitu v porovnaní s našimi AI prekladmi, poskytujú rýchlu predbežnú odpoveď.

Zároveň spustíme asynchrónnu úlohu prekladu, ktorá vygeneruje vysoko kvalitný, špičkový AI preklad pre váš reťazec. Keď 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ú namiesto toho vrátené.

Využívanie pôvodov

Projekty TacoTranslate obsahujú to, čomu hovoríme origins. Považujte ich za 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>
	);
}

Origins vám umožňujú rozdeliť reťazce do zmysluplných skupín. 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ť origins na úrovni komponentu.

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

Vezmite prosím na vedomie, že ten istý reťazec môže mať v rôznych originách odlišné preklady.

V konečnom dôsledku záleží na vás a vašich potrebách, ako reťazce rozdelíte do pôvodov. Majte však na pamäti, že veľké množstvo reťazcov v jednom pôvode môže zvýš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 sa však od tohto správania odhlásiť nastavením useDangerouslySetInnerHTML na false.

Pri prekladaní nedôveryhodného obsahu, ako je napríklad obsah vytváraný používateľmi, sa dôrazne odporúča vypnúť vykresľovanie HTML.

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

Uvedený príklad bude vykreslený 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