Bruke TacoTranslate
Oversette strenger
Det finnes for øyeblikket tre måter å oversette strenger på: Translate
komponenten, useTranslation
hooken, eller translateEntries
verktøyet.
Bruke Translate
komponenten.
Returnerer oversettelser innenfor et span
element, og støtter rendering av HTML.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Du kan endre elementtypen ved å bruke for eksempel as="p"
på komponenten.
Bruke useTranslation
hooken.
Returnerer oversettelser som ren tekst. Nyttig for eksempel i meta
tagger.
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>
);
}
Bruke translateEntries
verktøyet.
Oversett strenger på serversiden. Gi et kraftig løft til dine OpenGraph bilder.
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 strenger blir oversatt
Når strenger når våre servere, validerer og lagrer vi dem først, og returnerer deretter umiddelbart en maskinoversettelse. Selv om maskinoversettelser vanligvis har lavere kvalitet sammenlignet med våre AI-oversettelser, gir de et raskt første svar.
Samtidig starter vi en asynkron oversettelsesjobb for å generere en høykvalitets, toppmoderne AI-oversettelse for strengen din. Når AI-oversettelsen er klar, vil den erstatte maskinoversettelsen og bli sendt hver gang du ber om oversettelser for strengene dine.
Hvis du har oversatt en streng manuelt, vil disse oversettelsene ha forrang og bli returnert i stedet.
Utnytte opprinnelser
TacoTranslate-prosjekter inneholder det vi kaller origins. Tenk på dem som inngangspunkter, mapper eller grupper for strengene og oversettelsene dine.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origins lar deg dele opp setninger i meningsfulle beholdere. For eksempel kan du ha én origin for dokumentasjon og en annen for markedsføringssiden din.
For mer detaljert kontroll kan du sette opp origins på komponentnivå.
For å oppnå dette, vurder å bruke flere TacoTranslate tilbydere i prosjektet ditt.
Vennligst merk at den samme strengen kan få forskjellige oversettelser i forskjellige origins.
Til syvende og sist er det opp til deg og dine behov hvordan du deler opp tekststrenger i origins. Vær imidlertid oppmerksom på at å ha mange strenger i én origin kan øke lastetiden.
Håndtering av variabler
Du bør alltid bruke variabler for dynamisk innhold, som brukernavn, datoer, e-postadresser og mer.
Variabler i strenger erklæres med doble klammer, 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 av HTML-innhold
Som standard støtter og gjengir Translate
komponenten HTML-innhold. Du kan imidlertid velge å ikke bruke denne funksjonaliteten ved å sette useDangerouslySetInnerHTML
til false
.
Deaktivering av HTML-rendering anbefales på det sterkeste når du oversetter innhold som ikke er pålitelig, for eksempel brukergenerert innhold.
All output er alltid renset med sanitize-html før det gjengis.
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}
/>
);
}
Eksemplet ovenfor vil bli vist som ren tekst.