Dokumentation: Brug af TacoTranslate

Brug af TacoTranslate

Danish

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 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 f.eks. at bruge as="p" på komponenten.

Brug af useTranslation hooken.
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 strenge 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)
	};
}

Når tekststrenge når vores servere, validerer og gemmer vi dem først, og returnerer derefter straks en maskinoversættelse. Selvom maskinoversættelser generelt er af lavere kvalitet sammenlignet med vores AI-oversættelser, giver de et hurtigt indledende svar.

Samtidig igangsætter vi et asynkront oversættelsesjob for at generere en højkvalitets, topmoderne AI-oversættelse af 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.

Brug af oprindelser

TacoTranslate-projekter indeholder det, vi kalder origins. Tænk på dem som indgangspunkter, mapper eller grupper for dine tekststrenge 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 enheder. 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, at den samme streng kan få forskellige oversættelser i forskellige origins.

I sidste ende bestemmer du, hvordan du opdeler strenge i origins ud fra dine behov. Bemærk dog, at mange strenge i é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 angives med 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 fravælge denne adfærd ved at sætte useDangerouslySetInnerHTML til false.

Det anbefales kraftigt at slå HTML-gengivelse fra, når du oversætter indhold, som du ikke stoler på, f.eks. brugergenereret indhold.

Alt output sanitiseres altid med sanitize-html inden 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.

Gengivelse på serversiden

Brug af TacoTranslate

Sådan oversættes strenge

Brug af oprindelser

Håndtering af variabler

Håndtering af HTML-indhold