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 verktøyet translateEntries.

Bruk av Translate komponenten.
Viser omsetjingar inne i 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 til dømes å bruke as="p" på komponenten.

Bruke useTranslation‑hooken.
Returnerer omsetjingar som ein vanleg streng. 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 OpenGraph bileta dine eit kraftig løft.

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 strengane når serverane våre, kontrollerer og lagrar vi dei først, og returnerer straks ei maskinomsetjing. Sjølv om maskinomsetjingar vanlegvis har lågare kvalitet samanlikna med AI-omsetjingane våre, gir dei eit raskt innleiande svar.

Samstundes set vi i gang eit asynkront omsetjingsoppdrag for å generere ei høgkvalitets, toppmoderne AI-omsetjing for strengen din. Når AI-omsetjinga er klar, vil ho erstatte maskinomsetjinga og bli sendt kvar gong du ber om omsetjingar for strengene dine.

Dersom du har omsett ein streng manuelt, får desse omsetjingane prioritet og blir returnerte i staden.

Bruk av opphav

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

import {TacoTranslate} from 'tacotranslate/react';

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

Originar lar deg skilje tekststrengar i meiningfylte behaldarar. Til dømes kan du ha ein origin for dokumentasjonen og ein annan for marknadsføringssida di.

For meir granulær kontroll kan du setje opp originar på komponentnivå.

For å oppnå dette, vurder å bruke fleire TacoTranslate tilbydarar 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 delar strengane inn i originar. Ver likevel merksam på at mange strengar i éin origin kan føre til lengre lastetid.

Handsaming av variablar

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

Variablar i strengar blir deklarert med 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}});
}

Handtering av HTML-innhald

Som standard støttar Translate komponenten og gjengjev HTML-innhald. Du kan likevel slå av denne åtferda ved å sette useDangerouslySetInnerHTML til false.

Det er sterkt tilrådd å deaktivere HTML-gjengiving når ein omset ikkje-trusta innhald, til dømes brukarprodusert innhald.

All utdata 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}
		/>
	);
}

Eksemplet ovafor vil bli vist som vanleg tekst.

Rendering på serversida