Dokumentácia: Používanie TacoTranslate

Používanie TacoTranslate

Slovak

Prekladanie reťazcov

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

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

import {Translate} from 'tacotranslate/react';

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

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

Použitie useTranslation hooku.
Vracia preklady ako obyčajný reťazec. Vhodné 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žívanie utility translateEntries.
Prekladajte reťazce na strane servera. Zvýšte výkon svojich obrázkov OpenGraph.

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 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 prekladov na vytvorenie vysoko kvalitného, špičkového AI prekladu vášho reťazca. Akonáhle bude AI preklad pripravený, nahradí strojový preklad a bude odoslaný vždy, keď si vyžiadate preklady svojich reťazcov.

Ak ste reťazec preložili ručne, tieto preklady majú prednosť a sú namiesto toho vrátené.

Využívanie zdrojov

Projekty TacoTranslate obsahujú to, čo nazývame 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>
	);
}

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 jemnejš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 rovnaký reťazec môže v rôznych originách dostať rôzne preklady.

Nakoniec je na vás a vašich potrebách, ako oddelíte reťazce do originov. Však všimnite si, že mať veľa reťazcov v jednom origin 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ú 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 obsahu HTML

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

Dôrazne sa odporúča vypnúť 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 vykreslení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 zobrazený ako obyčajný text.

Serverové vykresľovanie

Používanie TacoTranslate

Ako sa reťazce prekladajú

Využívanie zdrojov

Práca s premennými

Správa obsahu HTML