Dokumentácia: Použitie TacoTranslate

Používanie TacoTranslate

Slovak

Preklad reťazcov

Momentálne sú k dispozícii tri spôsoby prekladu reťazcov: komponent Translate, hook useTranslation alebo utilita translateEntries.

Používanie komponentu Translate.
Vypisuje preklady v rámci elementu 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 háčika 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ž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 ihneď vrátime strojový preklad. Hoci sú strojové preklady všeobecne nižšej kvality v porovnaní s našimi AI prekladmi, poskytujú rýchlu počiatočnú odpoveď.

Súčasne spustíme asynchrónnu úlohu prekladania, aby sme pre váš reťazec vygenerovali vysoko kvalitný, špičkový AI preklad. Akonáhle je AI preklad pripravený, nahradí strojový preklad a bude odoslaný vždy, keď požiadate o 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 originov

Projekty TacoTranslate obsahujú to, čomu hovoríme pôvody. Môžete ich považovať za 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>
	);
}

Origins 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 podrobnejšiu kontrolu môžete nastaviť origins na úrovni komponentu.

Na dosiahnutie tohto zvážte použitie viacerých poskytovateľov TacoTranslate vo vašom projekte.

Upozorňujeme, že rovnaký reťazec môže v rôznych pôvodoch dostať rôzne preklady.

Nakoniec, ako rozdelíte reťazce do originov, závisí od vás a vašich potrieb. Všimnite si však, že mať mnoho 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ú 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 HTML obsahu

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

Dôrazne sa odporúča deaktivovať vykresľovanie HTML pri preklade nedôveryhodného obsahu, ako je napríklad obsah vytvorený používateľmi.

Všetok výstup je vždy pred vykreslením uprataný 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.

Vykresľovanie na strane servera

Používanie TacoTranslate

Ako sa prekladajú reťazce

Využívanie originov

Práca s premennými

Správa HTML obsahu