Documentació: Utilitzant TacoTranslate

Fent servir TacoTranslate

Catalan

Traducció de cadenes

Actualment hi ha tres maneres de traduir cadenes: el component Translate, el hook useTranslation o la utilitat translateEntries.

Utilitzant el component Translate.
Mostra les traduccions dins d’un element span, i suporta la representació de HTML.

import {Translate} from 'tacotranslate/react';

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

Pots canviar el tipus d’element utilitzant, per exemple, as="p" al component.

Utilitzant el useTranslation hook.
Retorna les traduccions com una cadena simple. Útil, per exemple, en etiquetes 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>
	);
}

Utilitzant la utilitat translateEntries.
Traduïu cadenes al costat del servidor. Potencieu les vostres imatges 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)
	};
}

Quan les cadenes arriben als nostres servidors, primer les validem i les desem, i després retornem immediatament una traducció automàtica. Tot i que les traduccions automàtiques generalment tenen una qualitat inferior en comparació amb les nostres traduccions amb IA, ofereixen una resposta inicial ràpida.

Simultàniament, iniciem una feina de traducció asíncrona per generar una traducció d’IA d’alta qualitat i d’última generació per a la vostra cadena. Un cop la traducció d’IA estigui llesta, substituirà la traducció mecànica i s’enviarà sempre que sol·liciteu traduccions per a les vostres cadenes.

Si heu traduït manualment una cadena, aquestes traduccions tenen prioritat i es retornen en el seu lloc.

Utilitzant orígens

Els projectes TacoTranslate contenen el que anomenem orígens. Penseu-hi com a punts d’entrada, carpetes o grups per a les vostres cadenes i traduccions.

import {TacoTranslate} from 'tacotranslate/react';

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

Els origins et permeten separar les cadenes en contenidors significatius. Per exemple, podries tenir un origen per a la documentació i un altre per a la teva pàgina de màrqueting.

Per a un control més exhaustiu, podríeu configurar orígens a nivell de component.

Per aconseguir-ho, considereu utilitzar diversos proveïdors de TacoTranslate dins del vostre projecte.

Tingueu en compte que la mateixa cadena pot rebre traduccions diferents en orígens diferents.

En última instància, com separis les cadenes en orígens depèn de tu i de les teves necessitats. Tanmateix, tingues en compte que tenir moltes cadenes dins d’un mateix origen pot augmentar els temps de càrrega.

Gestió de variables

Sempre hauríeu d’utilitzar variables per a contingut dinàmic, com ara noms d’usuari, dates, adreces de correu electrònic i més.

Les variables en les cadenes es declaren mitjançant doble claudàtors, com {{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}});
}

Gestió del contingut HTML

Per defecte, el component Translate admet i mostra contingut HTML. Tanmateix, pots desactivar aquest comportament establint useDangerouslySetInnerHTML a false.

Desactivar el renderitzat HTML és molt recomanat quan es tradueix contingut no fiable, com ara contingut generat per usuaris.

Tota sortida sempre es neteja amb sanitize-html abans de ser renderitzada.

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

L'exemple anterior es mostrarà com a text pla.

Renderització al servidor

Fent servir TacoTranslate

Com es tradueixen les cadenes

Utilitzant orígens

Gestió de variables

Gestió del contingut HTML