TacoTranslate gebruiken
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 weergeven van HTML.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Je 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 gewone string. Handig in bijvoorbeeld 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
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 teksten 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 in vergelijking met onze AI-vertalingen, bieden ze toch een snelle eerste respons.
Tegelijkertijd starten we een asynchrone vertaalopdracht om een hoogwaardige, geavanceerde AI-vertaling voor jouw tekst te genereren. Zodra de AI-vertaling klaar is, zal deze de machinale vertaling vervangen en worden verzonden telkens wanneer je vertalingen voor je teksten opvraagt.
Als u een tekenreeks handmatig heeft vertaald, krijgen die vertalingen voorrang en worden ze in plaats daarvan geretourneerd.
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 laten je toe 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 string verschillende vertalingen kan krijgen in verschillende origins.
Uiteindelijk is het aan u en uw behoeften hoe u strings indeelt in origins. 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, 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 echter van deze gedragswijze afzien door useDangerouslySetInnerHTML
in te stellen op false
.
Het uitschakelen van HTML-weergave wordt sterk aanbevolen bij het vertalen van onbetrouwbare 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.