Documentație: Utilizarea TacoTranslate

Utilizarea TacoTranslate

Romanian

Traducerea șirurilor de caractere

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

Folosind componenta Translate.
Generează traduceri î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ă.

Utilizarea hook-ului useTranslation.
Returnează traducerile ca un șir simplu. Util în, de exemplu, tag-urile 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 șiruri pe partea de server. Îmbunătățește performanța imaginilor tale 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 la serverele noastre, le validăm și le salvăm mai întâi, 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 un proces asincron de traducere pentru a genera o traducere AI de înaltă calitate, de ultimă generație, pentru șirul tău. Odată ce traducerea AI este gata, 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 schimb.

Utilizarea originilor

Proiectele TacoTranslate conțin ceea ce numim origini. Gândește-le ca 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 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, ai putea configura originile la nivelul componentelor.

Pentru a realiza acest lucru, luați în considerare folosirea mai multor furnizori TacoTranslate în cadrul proiectului dvs.

Vă rugăm să rețineți că aceeași expresie 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ă. Totuși, rețineți că având multe șiruri într-o singură origine poate mări timpii de încărcare.

Gestionarea variabilelor

Ar trebui să folosești întotdeauna variabile pentru conținutul 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 redă 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ținutul generat de utilizatori.

Toate rezultatele 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.

Redare pe partea serverului