Dokumentasjon: Bruk av TacoTranslate

Bruke TacoTranslate

Norwegian (Nynorsk)

Omsetjing av strengar

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

Å bruke Translate komponenten.
Skriver ut 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.

Bruk av 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>
	);
}

Bruk av translateEntries verktøyet.
Omset strenger på serversida. Gje ekstra kraft til dine OpenGraph bilete.

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 kjem til serverane våre, validerer og lagrar vi dei fyrst, og returnerer straks ein maskinoversetting. Sjølv om maskinoversettingar vanlegvis har lågare kvalitet enn AI-oversettingane våre, gir dei eit raskt innleiande svar.

Samstundes startar vi ein asynkron omsetjingsjobb for å generere 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 strengene dine.

Om du har omsett ein streng manuelt, vil desse omsetjingane ha forrang og bli returnert i staden.

Bruke opphav

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

import {TacoTranslate} from 'tacotranslate/react';

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

Originar let deg skilje tekststrengar i meiningfulle behaldarar. Til dømes kan du ha ein origin for dokumentasjon og ein annan for marknadsida di.

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

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

Ver merksam på at den same strengen kan få ulike omsetjingar i ulike originar.

Til slutt er det opp til deg og behova dine korleis du deler strengar inn i origins. Merk likevel at det å ha 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 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}});
}

Handtering av HTML-innhald

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

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

Alt innhald blir alltid reinsa 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 ovanfor vil bli vist som vanleg tekst.

Rendering på serversida