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 for et span element, og understøtter gengivelse 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 hooket.
Returnerer oversættelser som en almindelig tekststreng. Brugbart 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 ekstra kraft.

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 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 tekst. Når AI-oversættelsen er klar, vil den erstatte maskinoversættelsen og blive sendt, hver gang du anmoder om oversættelser af dine tekster.

Hvis du manuelt har oversat en streng, har disse oversættelser forrang og returneres i stedet.

Udnyttelse 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 adskille strenge i meningsfulde containere. For eksempel kunne 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 inden for dit projekt.

Bemærk venligst, 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 at have 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 erklæres ved hjælp af dobbeltklammer, 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}});
}

Administrering 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.

Deaktivering af HTML-visning anbefales kraftigt, når man oversætter ikke-pålideligt indhold, såsom brugergenereret indhold.

Alt output bliver altid renset med sanitize-html før det bliver vist.

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 blive gengivet som almindelig tekst.

Gengivelse på serversiden

Brug af TacoTranslate

Hvordan strenge oversættes

Udnyttelse af origins

Håndtering af variabler

Administrering af HTML-indhold