Documentatie: TacoTranslate gebruiken

TacoTranslate gebruiken

Dutch

Strings vertalen

Er zijn momenteel drie manieren om strings te vertalen: de Translate component, de useTranslation hook, of de translateEntries utility.

Het gebruik van de Translate component.
Geeft vertalingen weer binnen een span element en ondersteunt het renderen van HTML.

import {Translate} from 'tacotranslate/react';

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

U kunt het type element wijzigen door bijvoorbeeld as="p" op de component te gebruiken.

Het gebruik van de useTranslation hook.
Geeft vertalingen terug als een platte tekststring. Nuttig bijvoorbeeld in meta tags.

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>
	);
}

Gebruik van de translateEntries utility.
Vertaal strings aan de serverzijde. Geef je OpenGraph afbeeldingen een boost.

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)
	};
}

Hoe tekenreeksen worden vertaald

Wanneer strings onze servers bereiken, valideren en slaan we ze eerst op, waarna we onmiddellijk een machinale vertaling teruggeven. Hoewel machinale vertalingen over het algemeen van lagere kwaliteit zijn vergeleken met onze AI-vertalingen, bieden ze een snelle eerste reactie.

Tegelijkertijd starten we een asynchrone vertaatactie om een hoogwaardige, geavanceerde AI-vertaling voor je string te genereren. Zodra de AI-vertaling klaar is, zal deze de machinevertaling vervangen en worden verzonden telkens wanneer je vertalingen voor je strings opvraagt.

Als je een string handmatig hebt vertaald, krijgen die vertalingen voorrang en worden ze in plaats daarvan geretourneerd.

Origines gebruiken

TacoTranslate-projecten bevatten wat wij origins noemen. Beschouw ze als toegangspunten, mappen of groepen voor je strings en vertalingen.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins stellen je in staat om strings te scheiden in betekenisvolle containers. Je zou bijvoorbeeld één origin kunnen hebben voor documentatie en een andere voor je marketingpagina.

Voor meer gedetailleerde controle kunt u origins op componentniveau instellen.

Om dit te bereiken, overweeg meerdere TacoTranslate providers te gebruiken binnen je project.

Houd er rekening mee dat dezelfde string verschillende vertalingen kan krijgen in verschillende origins.

Uiteindelijk is het aan u en uw behoeften hoe u strings in origins scheidt. Houd er echter rekening mee dat het hebben van veel strings binnen één origin de laadtijd kan verhogen.

Omgaan met variabelen

U moet altijd variabelen gebruiken voor dynamische inhoud, zoals gebruikersnamen, data, e-mailadressen en meer.

Variabelen in strings worden gedeclareerd met dubbele accolades, zoals {{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}});
}

Beheren van HTML-inhoud

Standaard ondersteunt en rendert de Translate component HTML-inhoud. U kunt zich echter afmelden voor dit gedrag door useDangerouslySetInnerHTML in te stellen op false.

Het wordt sterk aanbevolen om het renderen van HTML uit te schakelen bij het vertalen van niet-vertrouwde inhoud, zoals door gebruikers gegenereerde inhoud.

Alle uitvoer wordt altijd geschoond met sanitize-html voordat deze wordt weergegeven.

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}
		/>
	);
}

Het bovenstaande voorbeeld wordt weergegeven als platte tekst.

Weergave aan de serverzijde