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.

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 elementtype wijzigen door bijvoorbeeld as="p" op de component te gebruiken.

Het gebruik van de useTranslation hook.
Geeft vertalingen terug als een gewone tekststring. Handig 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>
	);
}

Het translateEntries hulpprogramma gebruiken.
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)
	};
}

Wanneer strings onze servers bereiken, valideren en bewaren we ze eerst en geven we vervolgens onmiddellijk een machinevertaling terug. Hoewel machinevertalingen over het algemeen van lagere kwaliteit zijn in vergelijking met onze AI-vertalingen, bieden ze een snelle eerste respons.

Tegelijkertijd starten we een asynchrone vertaalopdracht om een hoogwaardige, geavanceerde AI-vertaling voor uw tekst te genereren. Zodra de AI-vertaling klaar is, zal deze de machinevertaling vervangen en worden verzonden telkens wanneer u vertalingen voor uw teksten opvraagt.

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

Origins gebruiken

TacoTranslate-projecten bevatten wat we origins noemen. Zie 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. Bijvoorbeeld, je kunt één origin hebben voor documentatie en een andere voor je marketingpagina.

Voor meer gedetailleerde controle kunt u origins instellen op componentniveau.

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

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

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

Omgaan met variabelen

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

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

HTML-inhoud beheren

Standaard ondersteunt en rendert de Translate component HTML-inhoud. U kunt deze werking echter uitschakelen door useDangerouslySetInnerHTML in te stellen op false.

Het uitschakelen van HTML-weergave wordt sterk aanbevolen bij het vertalen van niet-vertrouwde inhoud, zoals door gebruikers gegenereerde inhoud.

Alle output 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.

Rendering aan de serverzijde

TacoTranslate gebruiken

Hoe strings worden vertaald

Origins gebruiken

Omgaan met variabelen

HTML-inhoud beheren