Dokumentácia: Používanie TacoTranslate

Používanie TacoTranslate

Slovak

Preklad reťazcov

Momentálne sú tri spôsoby, ako prekladať reťazce: komponent Translate, hook useTranslation, alebo utilita translateEntries.

Používanie komponentu Translate.
Zobrazuje preklady v prvku span a podporuje vykresľovanie HTML.

import {Translate} from 'tacotranslate/react';

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

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

Použitie hooku 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 serveri. 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ď sa reťazce dostanú na naše servery, najprv ich overíme a uložíme, potom okamžite vrátime strojový preklad. Aj keď sú strojové preklady vo všeobecnosti nižšej kvality ako naše AI preklady, poskytujú rýchlu počiatočnú odpoveď.

Súčasne spúšťame 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 odosielaný vždy, keď požiadate o preklady svojich reťazcov.

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

Využitie originov

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

Ak to chcete dosiahnuť, zvážte použitie viacerých poskytovateľov TacoTranslate v rámci vášho projektu.

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

V konečnom dôsledku je na vás a vašich potrebách, ako rozdelíte reťazce do pôvodov. Majte však na pamäti, že veľké množstvo reťazcov v jednom pôvode môže zvýšiť čas načítania.

Práca s premennými

Vždy by ste mali používať premenné pre dynamický obsah, 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 HTML obsahu

Komponent Translate predvolene podporuje a vykresľuje HTML obsah. Avšak toto správanie môžete 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 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 vykreslený ako obyčajný text.

Renderovanie na strane servera

Používanie TacoTranslate

Ako sa reťazce prekladajú

Využitie originov

Práca s premennými

Správa HTML obsahu