Dokumentácia: Používanie TacoTranslate

Používanie TacoTranslate

Slovak

Preklad reťazcov

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

Používanie komponentu Translate.
Zobrazuje preklady v elemente 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žitie hooku 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 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. Hoci sú strojové preklady spravidla nižšej kvality v porovnaní s našimi AI prekladmi, poskytujú rýchlu počiatočnú odpoveď.

Zároveň spúšťame 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 manuálne preložili, 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>
	);
}

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.

Ak chcete jemnejšiu kontrolu, môžete nastaviť origins na úrovni komponentu.

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

Vezmite prosím na vedomie, že rovnaký 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 rozdelíte reťazce do originov. Majte však na pamäti, že veľa reťazcov v jednom origin môže zvýšiť čas 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. Ak si to neželáte, môžete 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 očistený 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.

Renderovanie na strane servera

Používanie TacoTranslate

Ako sa prekladajú reťazce

Využívanie pôvodov

Práca s premennými

Správa HTML obsahu