Dokumentácia: Použitie TacoTranslate

Používanie TacoTranslate

Slovak

Preklad reťazcov

Momentálne existujú tri spôsoby, ako preložiť reťazce: komponent Translate, hook useTranslation alebo utilita translateEntries.

Použitie komponentu Translate
Vykresľuje preklady v rámci span elementu a podporuje vykresľovanie HTML.

import {Translate} from 'tacotranslate/react';

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

Typ prvku môžete zmeniť pomocou, napríklad, as="p" na komponente.

Používanie 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 serverovej strane. Supernabite 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, najskôr ich overíme a uložíme, potom okamžite vrátime strojový preklad. Hoci sú strojové preklady väčšinou nižšej kvality v porovnaní s našimi AI prekladmi, poskytujú rýchlu počiatočnú odpoveď.

Súčasne spúšťame asynchrónnu úlohu prekladania, aby sme vytvorili vysoko kvalitný, špičkový AI preklad vášho textu. Akonáhle bude AI preklad pripravený, nahradí strojový preklad a bude odoslaný vždy, keď požiadate o preklady vašich textov.

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. Predstavte si ich 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 väčšiu kontrolu môžete nastaviť pôvody na úrovni komponentu.

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

Vezmite prosím na vedomie, že tá istá reťazec môže mať rôzne preklady v rôznych origins.

Nakoniec, ako rozdelíte reťazce do originov, závisí na vás a vašich potrebách. Však vezmite na vedomie, že mať veľa reťazcov v jednom origin môže zvýšiť čas načítania.

Spracovanie premenných

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

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

Silne sa odporúča zakázať vykresľovanie HTML pri prekladaní neovereného obsahu, ako je obsah vytváraný 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}
		/>
	);
}

Uvedený príklad bude vykreslený ako obyčajný text.

Serverové vykresľovanie

Používanie TacoTranslate

Ako sa prekladajú reťazce

Využívanie pôvodov

Spracovanie premenných

Správa HTML obsahu