Dokumentasjon: Bruk av TacoTranslate

Bruke TacoTranslate

Norwegian (Nynorsk)

Omsetjing av strengar

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

Bruke Translate‑komponenten.
Viser omsetjingar 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 å bruke, for eksempel, as="p" på komponenten.

Bruke useTranslation hooken.
Returnerer omsetjingar som ein vanleg streng. 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 tekststrengar på serversida. Gje OpenGraph bileta dine eit ekstra 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 blir omsette

Når strengane når serverane våre, validerer og lagrar vi dei først, og deretter returnerer vi straks ei maskinomsetjing. Sjølv om maskinomsetjingar generelt har lågare kvalitet samanlikna med AI-omsetjingane våre, gir dei eit raskt innledande svar.

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

Om du har omsett ein streng manuelt, har desse omsetjingane forrang og vert returnerte i staden.

Bruke originar

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

For å oppnå dette, vurder å bruke fleire TacoTranslate tilbydarar i prosjektet ditt.

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

Til slutt er det opp til deg og behova dine korleis du deler tekststrangar inn i originar. Merk likevel at å ha mange tekststrangar i ein origin kan auke innlastingstidene.

Handtering av variablar

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

Variablar i strengar deklarerast 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}});
}

Handtere HTML-innhald

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

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

Alt som blir sendt ut, blir alltid rensa 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 over vil bli vist som vanleg tekst.

Gjengiving på serversida