Documentació: Ús de TacoTranslate

Ús de TacoTranslate

Catalan

Traducció de cadenes

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

Fent servir 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 fent servir, per exemple, as="p" al component.

Ús del useTranslation hook.
Retorna les traduccions com una cadena de text simple. Ú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>
	);
}

Utilitzant la utilitat translateEntries.
Traduïu cadenes al costat del servidor. Potència 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 emmagatzemem, i tot seguit retornem immediatament una traducció automàtica. Tot i que les traduccions automàtiques són generalment de menor qualitat en comparació amb les nostres traduccions amb IA, ofereixen una resposta inicial ràpida.

Simultàniament, iniciem una tasca de traducció asincrònica 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à cada cop que sol·licitis traduccions per a les teves cadenes.

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

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 cadenes en contenidors amb significat. Per exemple, podries tenir un origin per a la documentació i un altre per a la teva pàgina de màrqueting.

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

Per aconseguir-ho, considereu utilitzar múltiples proveïdors TacoTranslate dins del vostre projecte.

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

Finalment, com separeu les cadenes en orígens depèn de vosaltres i de les vostres necessitats. Tanmateix, tingueu en compte que tenir moltes cadenes dins d’un mateix origen pot augmentar els temps de càrrega.

Gestió de variables

Sempre heu d’utilitzar variables per al 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 doble claudàtor, 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 mostra contingut HTML. No obstant això, pots desactivar aquest comportament configurant useDangerouslySetInnerHTML a false.

Es recomana molt desactivar el renderitzat HTML quan es tradueix contingut no fiable, com ara contingut generat per l'usuari.

Tot l'output sempre es neteja amb sanitize-html abans de ser renderitzat.

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.

Representació del costat del servidor

Ús de TacoTranslate

Com es tradueixen les cadenes

Utilitzant orígens

Gestió de variables

Gestió de contingut HTML