Dokumentácia: Používanie TacoTranslate

Používanie TacoTranslate

Slovak

Preklad reťazcov

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

Použitie komponentu Translate.
Zobrazuje preklady v elemente span a podporuje vykresľovanie HTML.

import {Translate} from 'tacotranslate/react';

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

Môžete zmeniť typ elementu, napríklad pomocou as="p" na komponente.

Používanie háku 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 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ď.

Zároveň spustíme asynchrónnu úlohu prekladu, aby sme pre váš reťazec vygenerovali vysoko kvalitný, špičkový AI preklad. Keď 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 ručne preložili, tieto preklady majú prednosť a budú namiesto toho vrátené.

Využitie originov

Projekty TacoTranslate obsahujú to, čomu hovoríme pôvody. 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>
	);
}

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.

Pre podrobnejšiu kontrolu môžete nastaviť zdroje na úrovni komponentu.

Ak to chcete dosiahnuť, zvážte použitie viacerých poskytovateľov TacoTranslate vo vašom projekte.

Upozorňujeme, že ten istý reťazec môže mať v rôznych originách odlišné preklady.

Nakoniec, to, ako rozdelíte reťazce do pôvodov, závisí od vás a vašich potrieb. Upozorňujeme však, že veľké množstvo reťazcov v jednom pôvode môže predĺžiť dobu načítania.

Práca s premennými

Pre dynamický obsah by ste mali vždy používať premenné, napríklad 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. Ak chcete tomuto správaniu zabrániť, nastavte useDangerouslySetInnerHTML na false.

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

Všetok výstup je vždy pred vykreslením sanitizovaný 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 prekladajú reťazce

Využitie originov

Práca s premennými

Správa HTML obsahu