Documentație: Utilizarea TacoTranslate

Utilizarea TacoTranslate

Romanian

Traducerea șirurilor de caractere

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

Folosirea componentului Translate.
Returnează traducerile într-un element span, și suportă redarea HTML.

import {Translate} from 'tacotranslate/react';

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

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

Folosirea hook-ului useTranslation.
Returnează traducerile ca un șir simplu. Util în, de exemplu, 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 partea de server. Îmbunătățește-ți 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)
	};
}

Cum sunt traduse șirurile de caractere

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

În același timp, inițiem un proces asincron de traducere pentru a genera o traducere AI de înaltă calitate, de ultimă generație, pentru șirul dumneavoastră. Odată ce traducerea AI este gata, aceasta va înlocui traducerea automată și va fi trimisă ori de câte ori solicitați traduceri pentru șirurile dumneavoastră.

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

Utilizarea originilor

Proiectele TacoTranslate conțin ceea ce numim origins. Gândește-le ca puncte de intrare, foldere sau grupuri pentru textele și traducerile tale.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins vă permit să separați șirurile de caractere în containere semnificative. De exemplu, ați putea avea un origin pentru documentație și altul pentru pagina dvs. de marketing.

Pentru un control mai granular, ați putea configura originile la nivel de componentă.

Pentru a realiza acest lucru, luați în considerare utilizarea mai multor furnizori TacoTranslate în cadrul proiectului 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 originuri depinde de dumneavoastră și de nevoile dumneavoastră. Totuși, rețineți că având multe șiruri într-un singur origin poate crește timpii de încărcare.

Gestionarea variabilelor

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

Variabilele din șiruri sunt declarate folosind paranteze duble, precum {{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

Implicit, componenta Translate suportă și afișează conținut HTML. Totuși, 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ținut 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 redat ca text simplu.

Redare pe partea de server