Documentació: Ús de TacoTranslate

Ús de TacoTranslate

Catalan

Traducció de cadenes

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

Ús del component Translate.
Mostra les traduccions dins d'un element span, i admet el renderitzat d'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.

Fer servir el hook useTranslation.
Retorna les traduccions com una cadena de text plana. Útil, per exemple, en les 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>
	);
}

Ús de la utilitat translateEntries.
Traduir cadenes al servidor. Potencia 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 guardem, 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 d'IA, ofereixen una resposta inicial ràpida.

Simultàniament, iniciem una tasca de traducció asíncrona per generar una traducció amb IA d'alta qualitat i d'avantguarda per a la teva cadena. Un cop la traducció amb IA estigui llesta, substituirà la traducció automàtica i s'enviarà sempre que sol·licitis les traduccions de les teves cadenes.

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

Ús d'orígens

Els projectes TacoTranslate contenen el que anomenem orígens. Considera'ls com a punts d'entrada, carpetes o grups per a les teves cadenes i traduccions.

import {TacoTranslate} from 'tacotranslate/react';

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

Els orígens 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 granular, podríeu configurar origens a nivell de component.

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

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

En última instància, com separis les cadenes en origins 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 al contingut dinàmic, com ara noms d'usuari, dates, adreces de correu electrònic i més.

Les variables dins les cadenes es declaren entre claus dobles, 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 renderitza contingut HTML. Tanmateix, pots desactivar aquest comportament establint useDangerouslySetInnerHTML a false.

Es recomana fermament desactivar la renderització HTML quan es tradueix contingut no fiable, com ara contingut generat per usuaris.

Tota la 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

Ús de TacoTranslate

Com es tradueixen les cadenes

Ús d'orígens

Gestió de variables

Gestió del contingut HTML