Dokumentasjon: Bruke TacoTranslate

Å bruke TacoTranslate

Norwegian (Nynorsk)

Oversetting av strenger

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

Bruke Translate komponenten.
Gir ut omsettingar innanfor eit span element, og støttar gjengiving 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 hook.
Returnerer omsettingar som ein enkel tekststreng. Nyttig i til dømes 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 strengar på serversida. Gi OpenGraph bileta dine 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 strengjer blir omsette

Når strengar kjem til serverane våre, validerer og lagrar vi dei først, og returnerer deretter umiddelbart ei maskinoversetting. Maskinoversettingar er vanlegvis av lågare kvalitet samanlikna med våre AI-oversettingar, men dei gir eit raskt første svar.

Samtidig startar vi eit asynkront omsetjingsoppdrag for å generere ei høgkvalitets, toppmoderne AI-omsetjing for strengen din. Når AI-omsetjinga er klar, vil den erstatte maskinomsetjinga og bli sendt kvar gong du ber om omsetjingar for strengane dine.

Dersom du har omsett ein tekststreng manuelt, har desse omsetjingane føretrinn og blir returnerte i staden.

Bruke opphav

TacoTranslate-prosjekt inneheld det vi kallar origins. Tenkt på dei som inngangspunkt, mapper, eller grupper for dine strenger og omsetjingar.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins lar deg dele strengjer inn i meiningsfulle containerar. Til dømes kan du ha ein origin for dokumentasjon og ein annan for marknadssida di.

For betre og meir detaljert kontroll, kan du sette 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. Ver likevel merksam på at det å ha mange strengar innanfor éin origin kan auke lastetidene.

Handtere variablar

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

Variablar i strengjer blir erklært ved bruk av doble krøllparentesar, 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}});
}

Handtere HTML-innhald

Som standard støttar og renderar Translate komponenten HTML-innhald. Du kan likevel velje å ikkje bruke denne åtferda ved å sette useDangerouslySetInnerHTML til false.

Å deaktivere HTML-rendering er sterkt tilrådd når du omset utrygge innhald, som til dømes brukarprodusert innhald.

All output blir alltid sanitert med sanitize-html før det blir 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}
		/>
	);
}

Dømet over vil bli vist som enkel tekst.

Server-side rendering