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.
Returnează traduceri în interiorul unui 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ă.

Folosind hook-ul 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>
	);
}

Folosind utilitarul translateEntries.
Traduce șiruri de caractere 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 ajung pe 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 slabă 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 dvs. Odată ce traducerea AI este gata, va înlocui traducerea automată și va fi trimisă ori de câte ori solicitați traduceri pentru șirurile dvs.

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 origine. Gândește-le ca puncte de intrare, dosare sau grupuri pentru șirurile și traducerile tale.

import {TacoTranslate} from 'tacotranslate/react';

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

Origini vă permit să separați șirurile de caractere î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 detaliat, ați putea configura origins 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ă aceeași frază poate primi traduceri diferite în origini diferite.

În cele din urmă, modul în care separați șirurile în origins 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 în ș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. 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 se traduc conținuturi nesigure, cum ar fi conținutul generat de utilizatori.

Tot ieșirea este întotdeauna curățată cu sanitize-html înainte de a fi afișată.

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 partea de server