Dokumentasjon: Bruk av TacoTranslate

Bruke TacoTranslate

Norwegian (Nynorsk)

Omsetjing av strengar

Det finst for tida tre måtar å omsetje tekststrengar på: Translate komponenten, useTranslation hooken, eller translateEntries-verktøyet.

Bruke Translate komponenten.
Gir omsetjingar inne i eit span element, og støttar vising av HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Du kan endre elementtypen ved å bruke til dømes as="p" på komponenten.

Bruke useTranslation hooken.
Returnerer omsetjingar som ein vanleg tekststreng. Nyttig til dømes i meta taggar.

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 tekststrengar på serversida. Gje dine OpenGraph bilete 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)
	};
}

Korleis tekststrengar vert omsette

Når tekststrengar kjem til serverane våre, validerer og lagrar vi dei fyrst, og sender deretter umiddelbart tilbake ein maskinoversetting. Sjølv om maskinoversettingar vanlegvis har lågare kvalitet enn AI-oversettingane våre, gir dei likevel eit raskt første svar.

Samtidig set vi i gang ei asynkron omsetjingsjobb for å generere ei høgkvalitets- og toppmoderne AI-omsetjing for strengen din. Når AI-omsetjinga er klar, vil ho erstatte maskinomsetjinga og sendast kvar gong du ber om omsetjingar for strengene dine.

Om du har omsett ein streng manuelt, går desse omsetjingane føre for og blir returnerte i staden.

Bruk av originar

TacoTranslate-prosjekt inneheld det vi kallar origins. Sjå på dei som inngangspunkt, mappar eller grupper for tekststrengane og omsetjingane dine.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Opphav gjer det mogleg å skilje strengar i meiningsfulle grupper. Til dømes kan du ha eit opphav for dokumentasjonen og eit anna for marknadsføringssida di.

For meir detaljert kontroll kan du setje opp origins på komponentnivå.

For å oppnå dette, vurder å bruke fleire TacoTranslate leverandørar i prosjektet ditt.

Merk at den same strengen kan få ulike omsetjingar i ulike opphav.

Til syvende og sist er det opp til deg og behova dine korleis du deler opp strengane i originar. Merk at mange strengar i ein og same origin kan auke lastetida.

Handtering av variablar

Du bør alltid bruke variablar for dynamisk innhald, som brukarnamn, datoar, e-postadresser og meir.

Variablar i strengar vert deklarerte med doble krøllparentesar, slik 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}});
}

Handsaming av HTML-innhald

Som standard støttar og viser Translate komponenten HTML-innhald. Du kan likevel velje bort denne åtferda ved å setje useDangerouslySetInnerHTML til false.

Det er sterkt tilrådd å slå av HTML-rendering når ein omset innhald ein ikkje stolar på, til dømes brukarprodusert innhald.

Alt utdata blir alltid rensa med sanitize-html før det vert rendera.

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 ovanfor vil bli vist som vanleg tekst.

Gjengiving på serversida