Dokumentation: Brug af TacoTranslate

Brug af TacoTranslate

Danish

Oversættelse af strenge

Der er i øjeblikket tre måder at oversætte strenge på: Komponenten Translate, hooken useTranslation eller hjælpefunktionen translateEntries.

Brug af Translate komponenten.
Returnerer oversættelser inden i 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 hook'en.
Returnerer oversættelser som en almindelig streng. Dette er 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. Sæt turbo på 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 strengene 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 end vores AI-oversættelser, giver de et hurtigt indledende svar.

Samtidig igangsætter vi et asynkront oversættelsesjob for at generere en topmoderne AI-oversættelse af dine strenge. 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, vil disse oversættelser have forrang og blive returneret 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 containere. For eksempel kan du have en origin til dokumentation og en anden til din marketing-side.

For mere granulær 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 er det op til dig og dine behov, hvordan du fordeler strings mellem origins. Bemærk dog, at mange strings i én origin kan øge indlæsningstiden.

Håndtering af variabler

Du bør altid bruge variabler til dynamisk indhold, såsom brugernavne, datoer, e-mailadresser og mere.

Variabler i strenge deklareres ved hjælp af dobbelte krøllede 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 af HTML-indhold

Som standard understøtter Translate komponenten og gengiver HTML-indhold. Du kan dog fravælge denne adfærd 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 bliver altid saniteret 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.

Gengivelse på serversiden