Dokumentatsioon: TacoTranslate'i kasutamine

TacoTranslate'i kasutamine

Estonian

Stringide tõlkimine

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

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!" />;
}

Komponendil saate näiteks as="p" abil muuta elemendi tüüpi.

Kasutades useTranslation hooki.
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>
	);
}

translateEntries utiliidi kasutamine.
Tõlgi stringid serveripoolselt. Võimenda oma OpenGraph pilte.

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õlgetega võrreldes madalama kvaliteediga, annavad need kiire esialgse vastuse.

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

Kui olete stringi käsitsi tõlkinud, siis need tõlked omavad eelist ja tagastatakse selle asemel.

Päritolude kasutamine

TacoTranslate projektid sisaldavad seda, mida me kutsume originsiks. 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 teil eraldada stringe tähenduslikesse konteineritesse. Näiteks võiksite kasutada ühte originit dokumentatsiooni jaoks ja teist oma turunduslehe jaoks.

Peenema kontrolli saavutamiseks võite komponendi tasemel seadistada originid.

Selle saavutamiseks kaaluge mitme TacoTranslate pakkuja kasutamist oma projektis.

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

Lõppkokkuvõttes sõltub see teie otsusest ja vajadustest, kuidas te stringid originitesse jagate. Kuid 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 kasutajanimesid, kuupäevi, e-posti aadresse jne.

Muutujad stringides 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. Saate aga sellest käitumisest loobuda, määrates useDangerouslySetInnerHTML väärtuseks false.

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

Kõik väljundid puhastatakse alati sanitize-html enne renderdamist.

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 lihttekstina.

Serveripoolne renderdamine

TacoTranslate'i kasutamine

Kuidas stringid tõlgitakse

Päritolude kasutamine

Muutujate käsitlemine

HTML-sisu haldamine