Documentatie: TacoTranslate gebruiken

Gebruik van TacoTranslate

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 weergeven van HTML.

import {Translate} from 'tacotranslate/react';

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

Je kunt het elementtype wijzigen door bijvoorbeeld as="p" te gebruiken op de component.

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

Gebruik van de translateEntries utility.
Vertaal strings aan de serverzijde. Geef je OpenGraph afbeeldingen extra kracht.

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 vervolgens direct een machinevertaling terug. Hoewel machinevertalingen over het algemeen van lagere kwaliteit zijn vergeleken met onze AI-vertalingen, bieden ze een snelle eerste reactie.

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

Als u een tekenreeks handmatig hebt vertaald, hebben die vertalingen voorrang en worden ze in plaats daarvan geretourneerd.

Gebruik van origins

TacoTranslate-projecten bevatten wat we origins noemen. Zie ze als toegangspunten, mappen of groepen voor je teksten en vertalingen.

import {TacoTranslate} from 'tacotranslate/react';

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

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

Voor meer gedetailleerde controle kunt u origins instellen op het componentniveau.

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

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

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

Omgaan met variabelen

Je moet altijd variabelen gebruiken voor dynamische inhoud, zoals gebruikersnamen, data, 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}});
}

Beheren van HTML-inhoud

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

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

Alle uitvoer wordt altijd gesanitized 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

Gebruik van TacoTranslate

Hoe strings worden vertaald

Gebruik van origins

Omgaan met variabelen

Beheren van HTML-inhoud