Documentatie: TacoTranslate gebruiken

TacoTranslate gebruiken

Dutch

Strings vertalen

Er zijn momenteel drie manieren om strings te vertalen: het 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 elementtype wijzigen door bijvoorbeeld as="p" op de component te gebruiken.

Gebruik van de useTranslation hook.
Geeft vertalingen terug als een platte tekenreeks. 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 gebruik van de translateEntries hulpprogramma.
Vertaal strings op de server. 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 slaan we ze eerst op en geven we onmiddellijk een machinevertaling terug. Hoewel machinevertalingen over het algemeen van lagere kwaliteit zijn dan onze AI-vertalingen, bieden ze een snelle eerste reactie.

Gelijktijdig starten we een asynchrone vertaaktaak om een hoogwaardige, state-of-the-art AI-vertaling voor uw string te genereren. Zodra de AI-vertaling klaar is, zal deze de machinevertaling vervangen en worden verzonden telkens wanneer u vertalingen voor uw strings 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 wij origins noemen. Zie ze als ingangspunten, mappen of groepen voor je strings en vertalingen.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins laten je strings in zinvolle containers onderbrengen. Je zou bijvoorbeeld één origin voor de documentatie kunnen hebben en een andere voor je marketingpagina.

Voor fijnmazigere controle kun je origins op componentniveau instellen.

Om dit te bereiken, overweeg het gebruik van meerdere TacoTranslate providers binnen je project.

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

Uiteindelijk is het aan jou en je behoeften hoe je strings in origins verdeelt. Houd er echter rekening mee dat veel strings binnen één origin de laadtijden kunnen verhogen.

Omgaan met variabelen

Gebruik altijd variabelen voor dynamische inhoud, zoals gebruikersnamen, datums, 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}});
}

HTML-inhoud beheren

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

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

Alle uitvoer wordt altijd gesaneerd 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 als platte tekst weergegeven.

Rendering aan de serverzijde

TacoTranslate gebruiken

Hoe strings worden vertaald

Origins gebruiken

Omgaan met variabelen

HTML-inhoud beheren