Brug af TacoTranslate
Oversættelse af strenge
Der er i øjeblikket tre måder at oversætte strenge på: Translate
komponenten, useTranslation
hooken eller translateEntries
værktøjet.
Brug af Translate
komponenten.
Returnerer oversættelser inden for 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 for eksempel at bruge as="p"
på komponenten.
Brug af useTranslation
hook.
Returnerer oversættelser som en almindelig tekststreng. Nyttigt i for eksempel 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 strenge på serversiden. Giv dine OpenGraph billeder et ekstra 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)
};
}
Sådan oversættes strenge
Når strenge når vores servere, validerer og gemmer vi dem først, hvorefter vi straks returnerer en maskinoversættelse. Selvom maskinoversættelser generelt er af lavere kvalitet sammenlignet med vores AI-oversættelser, giver de et hurtigt første svar.
Samtidigt igangsætter vi et asynkront oversættelsesjob for at generere en højkvalitets, avanceret AI-oversættelse af din streng. Når AI-oversættelsen er klar, vil den erstatte maskinoversættelsen og blive sendt, når du anmoder om oversættelser af dine strenge.
Hvis du har oversat en streng manuelt, har disse oversættelser forrang og returneres i stedet.
Brug 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 giver dig mulighed for at opdele strenge i meningsfulde beholdere. For eksempel kan du have én origin til dokumentation og en anden til din marketing-side.
For mere detaljeret kontrol kan du opsætte origins på komponentniveau.
For at opnå dette, overvej at bruge flere TacoTranslate udbydere i dit projekt.
Bemærk venligst, at den samme streng kan modtage 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 at have mange strenge inden for én origin kan øge indlæsningstiderne.
Håndtering af variabler
Du bør altid bruge variabler til dynamisk indhold, såsom brugernavne, datoer, e-mailadresser og mere.
Variabler i strenge erklæres ved hjælp af dobbelte 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 renderer Translate
komponenten HTML-indhold. Du kan dog fravælge denne adfærd ved at sætte useDangerouslySetInnerHTML
til false
.
Deaktivering af HTML-rendering anbefales kraftigt, når du oversætter ikke-pålidelig indhold, såsom brugergenereret indhold.
Al output bliver altid renset med sanitize-html før den vises.
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}
/>
);
}
Ovenstående eksempel vil blive vist som almindelig tekst.