Fent servir TacoTranslate
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 el renderitzat de 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.
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
Tradueix cadenes al costat del 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)
};
}
Com es tradueixen les cadenes
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 AI, 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 vostra cadena. Un cop la traducció d’IA estigui llesta, reemplaçarà la traducció automàtica i s’enviarà cada cop que sol·liciteu traduccions per a les vostres cadenes.
Si has 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 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 origins et permeten separar cadenes en contenidors amb significat. Per exemple, podríeu tenir un origen per a la documentació i un altre per a la pàgina de màrqueting.
Per a un control més granular, podríeu configurar origins 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 diferents origins.
En última instància, com separis les cadenes en origins depèn de tu i de les teves necessitats. No obstant això, tingues en compte que tenir moltes cadenes dins d’un únic 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 utilitzant claudàtors 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ó de contingut HTML
Per defecte, el component Translate
suporta i mostra contingut HTML. Tanmateix, pots desactivar aquest comportament configurant useDangerouslySetInnerHTML
a false
.
Es recomana molt desactivar el renderitzat HTML quan es tradueixi 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 sense format.