Dokumentatsioon: TacoTranslate'i kasutamine

TacoTranslate'i kasutamine

Estonian

Stringide tõlkimine

Praegu on kolm võimalust stringide tõlkimiseks: Translate komponent, useTranslation hook või translateEntries utiliit.

Translate komponendi kasutamine.
Väljastab tõlked span elemendi sees ning toetab HTML-i renderdamist.

import {Translate} from 'tacotranslate/react';

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

Saate muuta elemendi tüüpi, näiteks kasutades komponendil as="p".

useTranslation hooki kasutamine.
Tagastab tõlked tavalise stringina. Kasulik näiteks meta siltides.

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>
	);
}

Kasutades translateEntries utiliiti.
Tõlgi stringid serveripoolsel küljel. Tee oma OpenGraph pildid võimsamaks.

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)
	};
}

Kui stringid jõuavad meie serveritesse, valideerime ja salvestame need esmalt ning tagastame seejärel kohe masintõlke. Kuigi masintõlked on üldiselt meie tehisintellekti tõlgetest madalama kvaliteediga, pakuvad need kiiret esmast vastust.

Samal ajal alustame asünkroonset tõlketööd, et genereerida teie stringi jaoks kõrgekvaliteediline, tipptasemel tehisintellekti tõlge. Kui tehisintellekti tõlge on valmis, asendab see masintõlke ja seda saadetakse iga kord, kui taotlete oma stringide tõlkeid.

Kui olete sõne käsitsi tõlkinud, eelistatakse neid tõlkeid ja need tagastatakse.

Päritolude kasutamine

TacoTranslate'i projektides leidub seda, mida me nimetame päritoludeks. Mõelge neile kui sisenemispunktidele, kaustadele või gruppidele teie stringide ja tõlgete jaoks.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Originid võimaldavad eraldada stringe tähenduslikesse konteineritesse. Näiteks võite dokumentatsiooni jaoks kasutada ühte origini ja oma turunduslehe jaoks teist.

Täpsema kontrolli jaoks võite originid seadistada komponendi tasemel.

Selle saavutamiseks kaaluge mitme TacoTranslate pakkuja kasutamist oma projektis.

Pange tähele, et sama string võib erinevates allikates saada erinevaid tõlkeid.

Lõppkokkuvõttes sõltub sellest, kuidas te stringe originitesse jaotate — see sõltub teie eelistustest ja vajadustest. Siiski pange tähele, et kui ühes originis on palju stringe, võib see suurendada laadimisaegu.

Muutujate käsitlemine

Dünaamilise sisu puhul peaksite alati kasutama muutujaid, näiteks kasutajanimede, kuupäevade, e‑posti aadresside jne jaoks.

Stringides olevad muutujad deklareeritakse topeltsulgude abil, näiteks {{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}});
}

HTML-sisu haldamine

Vaikimisi Translate komponent toetab ja renderdab HTML-sisu. Siiski saate sellest käitumisest loobuda, seades useDangerouslySetInnerHTML väärtuseks false.

HTML-i renderdamise keelamine on tungivalt soovitatav, kui tõlgitakse mittetõendatud sisu, näiteks kasutajate loodud sisu.

Kogu väljund puhastatakse enne kuvamist alati 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}
		/>
	);
}

Ülaltoodud näide kuvatakse tavalise tekstina.

Serveripoolne renderdamine

TacoTranslate'i kasutamine

Kuidas stringid tõlgitakse

Päritolude kasutamine

Muutujate käsitlemine

HTML-sisu haldamine