Brug af TacoTranslate
Oversættelse af strenge
Der er i øjeblikket tre måder at oversætte strenge på: komponenten Translate
, hooken useTranslation
eller translateEntries
-værktøjet.
Brug af Translate
komponenten.
Returnerer oversættelser i et span
element og understøtter rendering af HTML.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Du kan ændre elementtypen ved at bruge, for eksempel, as="p"
på komponenten.
Brug af useTranslation
hooket.
Returnerer oversættelser som en almindelig streng. Nyttigt f.eks. i 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>
);
}
Brug af translateEntries
værktøjet.
Oversæt tekststrenge på serversiden. Forstærk dine OpenGraph billeder.
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)
};
}
Hvordan tekststrenge oversættes
Når tekststrenge når vores servere, validerer og gemmer vi dem først, og returnerer straks en maskinoversættelse. Selvom maskinoversættelser generelt er af lavere kvalitet sammenlignet med vores AI-oversættelser, giver de et hurtigt indledende svar.
På samme tid igangsætter vi et asynkront oversættelsesjob for at generere en topmoderne AI-oversættelse af høj kvalitet for din streng. Når AI-oversættelsen er klar, vil den erstatte maskinoversættelsen og blive sendt, hver gang du anmoder om oversættelser af dine strenge.
Hvis du manuelt har oversat en streng, har disse oversættelser forrang og returneres i stedet.
Anvendelse af origins
TacoTranslate-projekter indeholder det, vi kalder origins. Tænk på dem som indgangspunkter, mapper eller grupper for dine strenge og oversættelser.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origins lader dig adskille strenge i meningsfulde beholdere. For eksempel kan du have én origin til dokumentation og en anden til din marketing-side.
For mere finmasket kontrol kan du oprette origins på komponentniveau.
For at opnå dette, overvej at bruge flere TacoTranslate udbydere i dit projekt.
Bemærk, at den samme streng kan få forskellige oversættelser i forskellige origins.
I sidste ende er det op til dig og dine behov, hvordan du opdeler strenge i origins. Bemærk dog, at det kan øge indlæsningstiderne, hvis der er mange strenge i én origin.
Håndtering af variabler
Du bør altid bruge variabler til dynamisk indhold, såsom brugernavne, datoer, e-mailadresser og mere.
Variabler i strenge angives ved hjælp af dobbelte krøllede parenteser, som {{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}});
}
Håndtering af HTML-indhold
Som standard understøtter og gengiver Translate
komponenten HTML-indhold. Du kan dog slå denne adfærd fra ved at sætte useDangerouslySetInnerHTML
til false
.
Det anbefales kraftigt at slå HTML-rendering fra, når du oversætter upålideligt indhold, såsom brugergenereret indhold.
Alt output renses altid med sanitize-html før det gengives.
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}
/>
);
}
Det ovenstående eksempel vil blive gengivet som almindelig tekst.