Documentație: Utilizarea TacoTranslate

Utilizarea TacoTranslate

Romanian

Traducerea șirurilor

În prezent există trei moduri de a traduce șiruri: componenta Translate, hook-ul useTranslation, sau utilitarul translateEntries.

Utilizarea componentului Translate.
Afișează traducerile într-un element span, și suportă redarea HTML.

import {Translate} from 'tacotranslate/react';

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

Puteți schimba tipul elementului folosind, de exemplu, as="p" pe componentă.

Utilizarea hook-ului useTranslation.
Returnează traducerile ca un șir simplu. Este util, de exemplu, în etichetele meta.

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

Folosirea utilitarului translateEntries.
Traduceți șiruri pe server. Îmbunătățiți semnificativ imaginile 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)
	};
}

Când șirurile ajung pe serverele noastre, mai întâi le validăm și le salvăm, apoi returnăm imediat o traducere automată. Deși traducerile automate sunt, în general, de calitate mai scăzută comparativ cu traducerile noastre realizate de AI, ele oferă un răspuns inițial rapid.

În același timp, demarăm un job de traducere asincron pentru a genera o traducere AI de înaltă calitate, de ultimă generație, pentru șirul tău. Odată ce traducerea realizată de AI este gata, aceasta va înlocui traducerea automată și va fi trimisă de fiecare dată când soliciți traduceri pentru șirurile tale.

Dacă ați tradus manual un șir, acele traduceri au prioritate și sunt returnate în locul celorlalte.

Utilizarea originilor

Proiectele TacoTranslate conțin ceea ce numim origini. Gândește-te la ele ca la puncte de intrare, foldere sau grupuri pentru șirurile și traducerile tale.

import {TacoTranslate} from 'tacotranslate/react';

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

Originile îți permit să separi șirurile în containere semnificative. De exemplu, ai putea avea o origine pentru documentație și alta pentru pagina ta de marketing.

Pentru un control mai granular, ai putea configura originile la nivelul componentei.

Pentru a realiza acest lucru, luați în considerare utilizarea mai multor TacoTranslate furnizori în proiectul dumneavoastră.

Vă rugăm să rețineți că același șir poate primi traduceri diferite în origini diferite.

În cele din urmă, modul în care separați șirurile în origini depinde de dumneavoastră și de nevoile dumneavoastră. Cu toate acestea, rețineți că plasarea multor șiruri într-o singură origine poate crește timpii de încărcare.

Gestionarea variabilelor

Ar trebui întotdeauna să folosiți variabile pentru conținutul dinamic, cum ar fi numele utilizatorilor, datele, adresele de e-mail și altele.

Variabilele din șiruri se declară folosind paranteze duble, de exemplu {{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}});
}

Gestionarea conținutului HTML

În mod implicit, componenta Translate acceptă și redă conținut HTML. Cu toate acestea, poți renunța la acest comportament setând useDangerouslySetInnerHTML la false.

Dezactivarea redării HTML este puternic recomandată atunci când traduceți conținut nesigur, cum ar fi conținutul generat de utilizatori.

Toate ieșirile sunt întotdeauna curățate cu sanitize-html înainte de a fi afișate.

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

Exemplul de mai sus va fi afișat ca text simplu.

Randare pe server

Utilizarea TacoTranslate

Cum se traduc șirurile

Utilizarea originilor

Gestionarea variabilelor

Gestionarea conținutului HTML