Documentation : Utilisation de TacoTranslate

Utiliser TacoTranslate

French (Canada)

Traduire des chaînes

Il existe actuellement trois façons de traduire des chaînes : le Translate composant, le useTranslation hook ou l'utilitaire translateEntries.

Utilisation du Translate composant.
Sort les traductions dans un élément span, et prend en charge le rendu HTML.

import {Translate} from 'tacotranslate/react';

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

Vous pouvez changer le type d'élément en utilisant, par exemple, as="p" sur le composant.

Utilisation du useTranslation hook.
Renvoie des traductions sous forme de chaîne de texte simple. Utile, par exemple, dans les balises 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>
	);
}

Utilisation de l'outil translateEntries.
Translatez des chaînes côté serveur. Améliorez vos images 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)
	};
}

Comment les chaînes sont traduites

Lorsque les chaînes atteignent nos serveurs, nous les validons d'abord et les sauvegardons, puis nous retournons immédiatement une traduction automatique. Bien que les traductions automatiques soient généralement de qualité inférieure par rapport à nos traductions IA, elles offrent une réponse initiale rapide.

En même temps, nous lançons un travail de traduction asynchrone pour générer une traduction AI de haute qualité à la pointe de la technologie pour votre chaîne. Une fois que la traduction AI est prête, elle remplacera la traduction machine et sera envoyée chaque fois que vous demanderez des traductions pour vos chaînes.

Si vous avez traduit manuellement une chaîne, ces traductions ont la priorité et sont retournées à la place.

Utilisation des origines

Les projets TacoTranslate contiennent ce que nous appelons origines. Pensez-y comme des points d'entrée, des dossiers ou des groupes pour vos chaînes et traductions.

import {TacoTranslate} from 'tacotranslate/react';

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

Les origines vous permettent de séparer les chaînes en conteneurs significatifs. Par exemple, vous pourriez avoir une origine pour la documentation et une autre pour votre page marketing.

Pour un contrôle plus granulaire, vous pourriez configurer des origines au niveau du composant.

Pour y parvenir, envisagez d'utiliser plusieurs TacoTranslate fournisseurs dans votre projet.

Veuillez noter que la même chaîne peut recevoir des traductions différentes dans différentes origines.

En fin de compte, la façon dont vous séparez les chaînes en origines dépend de vous et de vos besoins. Cependant, notez qu'avoir de nombreuses chaînes dans une seule origine peut augmenter les temps de chargement.

Gestion des variables

Vous devez toujours utiliser des variables pour le contenu dynamique, tel que les noms d'utilisateur, les dates, les adresses e-mail, et plus encore.

Les variables dans les chaînes sont déclarées en utilisant des doubles crochets, comme {{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}});
}

Gestion du contenu HTML

Par défaut, le Translate composant prend en charge et rend le contenu HTML. Cependant, vous pouvez vous soustraire à ce comportement en définissant useDangerouslySetInnerHTML sur false.

Il est fortement recommandé de désactiver le rendu HTML lors de la traduction de contenu non fiable, tel que le contenu généré par les utilisateurs.

Toutes les sorties sont toujours assainies avec sanitize-html avant d'être rendues.

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 ci-dessus sera rendu en texte brut.

Rendu côté serveur