Dokumentácia: Používanie TacoTranslate

Používanie TacoTranslate

Slovak

Prekladanie reťazcov

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

Použitie komponentu Translate.
Vypisuje preklady v rámci span elementu 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 háku useTranslation.
Vracia preklady ako obyčajný textový 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 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, potom ihneď vrátime strojový preklad. Hoci strojové preklady sú zvyčajne kvalitatívne nižšie v porovnaní s našimi AI prekladmi, poskytujú rýchlu počiatočnú odpoveď.

Súčasne spustíme asynchrónnu úlohu prekladu, aby sme pre váš reťazec vytvorili kvalitný, špičkový AI preklad. Akonáhle bude AI preklad pripravený, nahradí strojový preklad a bude odoslaný vždy, keď si vyžiadajte 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 originálov

Projekty TacoTranslate obsahujú to, čomu hovoríme origíny. Predstavte si ich ako vstupné body, zložky 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 druhý pre vašu marketingovú stránku.

Pre podrobnejš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 v rôznych origins dostať odlišné preklady.

Nakoniec, ako rozdelíte reťazce do zdrojov, závisí od vás a vašich potrieb. Však vezmite na vedomie, že mať veľa reťazcov v jednom zdroji 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 zobrazuje HTML obsah. Avšak môžete vypnúť toto správanie nastavením useDangerouslySetInnerHTML na false.

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

Všetok výstup je vždy pred vykreslením sanovaný 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 obyčajný text.

Renderovanie na strane servera

Používanie TacoTranslate

Ako sa reťazce prekladajú

Využívanie originálov

Práca s premennými

Správa obsahu HTML