Dokumentácia: Používanie TacoTranslate

Používanie TacoTranslate

Slovak

Preklad reťazcov

Momentálne existujú tri spôsoby, ako preložiť reťazce: komponent Translate, hook useTranslation, alebo utilita translateEntries.

Používanie komponentu Translate.
Zobrazuje preklady v elemente span, a podporuje renderovanie HTML.

import {Translate} from 'tacotranslate/react';

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

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

Použitie háku useTranslation.
Vracia preklady ako obyčajný reťazec. Užitočné napríklad v značkách meta.

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 obrázky OpenGraph.

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 sú strojové preklady vo všeobecnosti nižšej kvality v porovnaní s našimi AI prekladmi, poskytujú rýchlu počiatočnú odpoveď.

Súčasne iniciujeme asynchrónnu úlohu prekladu, aby sme pre váš reťazec vygenerovali vysokokvalitný, špičkový AI preklad. 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 ručne preložili, tieto preklady majú prednosť a budú vrátené.

Využívanie pôvodov

Projekty TacoTranslate obsahujú to, čomu hovoríme originami. 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>
	);
}

Origins vám umožňujú oddeliť 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ť zdroje na úrovni komponentu.

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

Upozorňujeme, že rovnaký reťazec môže mať v rôznych originách odlišné preklady.

Nakoniec je na vás, ako rozdelíte reťazce do originov podľa vašich potrieb. Majte však na pamäti, že veľké množstvo reťazcov v jednom origin môže zvýšiť dobu načítania.

Práca s premennými

Pre dynamický obsah by ste vždy mali používať premenné, napríklad 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

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

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

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}
		/>
	);
}

Vyššie 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 obsahu HTML