Documentació: Ús de TacoTranslate

Utilitzant TacoTranslate

Catalan

Traducció de cadenes

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

Ús del component Translate.
Mostra les traduccions dins d’un element span, i suporta el renderitzat d’HTML.

import {Translate} from 'tacotranslate/react';

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

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

Fent servir el useTranslation hook.
Retorna traduccions com a cadena plana. Ú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 l’utilitat translateEntries.
Tradueix cadenes al costat del servidor. Dona més potència a les teves 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 solen tenir una qualitat inferior respecte a les nostres traduccions amb IA, ofereixen una resposta inicial ràpida.

Simultàniament, iniciem una tasca de traducció asíncrona per generar una traducció d’IA d’alta qualitat i d’última generació per a la teva cadena. Un cop la traducció d’IA estigui llesta, substituirà la traducció automàtica i s’enviarà sempre que sol·licitis traduccions per a les teves 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 en ells 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 orígens et permeten separar cadenes en contenidors significatius. Per exemple, podríeu tenir un origen per a la documentació i un altre per a la vostra pàgina de màrqueting.

Per a un control més granular, podríeu configurar origins a nivell de component.

Per aconseguir-ho, considera utilitzar diversos proveïdors TacoTranslate dins del teu projecte.

Si us plau, 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. Tot i així, tingues en compte que tenir moltes cadenes dins d’un sol orígen pot augmentar els temps de càrrega.

Gestió de variables

Hauríeu d'utilitzar sempre 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 utilitzant dobles 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ó de contingut HTML

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

Es recomana molt no activar el renderitzat HTML quan es tradueix contingut no fiable, com ara contingut generat pels usuaris.

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

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

Utilitzant TacoTranslate

Com es tradueixen les cadenes

Utilitzant orígens

Gestió de variables

Gestió de contingut HTML