Documentație: Utilizarea TacoTranslate

Utilizarea TacoTranslate

Romanian

Traducerea șirurilor de caractere

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

Folosind componenta 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. 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>
	);
}

Utilizarea utilitarului translateEntries.
Traduceți șirurile pe server. Îmbunătățiț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

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 AI, ele oferă un răspuns inițial rapid.

În același timp, inițiem o sarcină de traducere asincronă pentru a genera o traducere AI de înaltă calitate, de ultimă generație, pentru șirul tău. Odată ce traducerea AI este gata, ea va înlocui traducerea automată și va fi trimisă ori de câte ori soliciți traduceri pentru șirurile tale.

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

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 textele și traducerile tale.

import {TacoTranslate} from 'tacotranslate/react';

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

Origini vă permit să separați șirurile în containere semnificative. De exemplu, ați putea avea o origine pentru documentație și alta pentru pagina dvs. de marketing.

Pentru un control mai granular, puteți configura origini la nivelul componentei.

Pentru a realiza acest lucru, ia în considerare utilizarea mai multor furnizori TacoTranslate în cadrul proiectului tău.

Rețineți că același șir poate avea traduceri diferite în origini diferite.

În cele din urmă, modul în care separați șirurile în origini depinde de dumneavoastră și de nevoile dumneavoastră. Totuși, rețineți că prea multe șiruri într-o singură origine pot 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, cum ar fi {{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 suportă și redă conținut HTML. Totuși, poți renunța la acest comportament setând useDangerouslySetInnerHTML la false.

Dezactivarea afișă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 sanitizate 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.

Randare pe server