Dokumentácia: Používanie TacoTranslate

Používanie TacoTranslate

Slovak

Preklad reťazcov

V súčasnosti existujú tri spôsoby, ako preložiť reťazce: komponent Translate, hák useTranslation alebo utilita translateEntries.

Používanie komponentu Translate.
Vypisuje preklady v rámci elementu span, a podporuje renderovanie HTML.

import {Translate} from 'tacotranslate/react';

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

Typ prvku 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 utility 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ď reťazce dorazia na naše servery, najprv ich overíme a uložíme, potom okamžite vrátime strojový preklad. Hoci strojové preklady sú vo všeobecnosti kvalitnejšie nižšie v porovnaní s našimi AI prekladmi, poskytujú rýchlu počiatočnú odpoveď.

Súčasne spustíme asynchrónnu úlohu prekladania, aby sme vygenerovali vysokokvalitný, špičkový AI preklad vášho reťazca. 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 sú namiesto toho vrátené.

Využívanie pôvodov

Projekty TacoTranslate obsahujú to, čomu hovoríme origins. Môžete si ich predstaviť 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 môžete mať jeden origin pre dokumentáciu a iný pre vašu marketingovú stránku.

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

Na dosiahnutie tohto cieľa 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 dostať rôzne preklady v rôznych zdrojoch.

Nakoniec je na vás a vašich potrebách, ako rozdelíte reťazce do origínov. Však, majte na pamäti, že veľké množstvo reťazcov v jednom origíne môže zvýšiť časy načítania.

Práca s premennými

Vždy by ste mali používať premenné pre dynamický obsah, ako sú mená používateľov, 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

Štandardne komponent Translate podporuje a vykresľuje HTML obsah. Môžete sa však z tohto správania odhlásiť nastavením useDangerouslySetInnerHTML na false.

Dôrazne sa odporúča zakázať vykresľovanie HTML pri preklade nedôveryhodného obsahu, ako je obsah vytváraný používateľmi.

Všetok výstup je vždy pred zobrazením očistený 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 vykreslený ako čistý text.

Server-side renderovanie

Používanie TacoTranslate

Ako sa prekladajú reťazce

Využívanie pôvodov

Práca s premennými

Správa obsahu HTML