Dokumentasjon: Bruke TacoTranslate

Bruke TacoTranslate

Norwegian (Nynorsk)

Omsetjing av strengjer

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 rendering 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 hook.
Returnerer omsettingar som ein rein 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 strengjer på serversida. Gi 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 strengjer blir omsette

Når strengjer når serverane våre, validerer og lagrar vi dei først, og returnerer deretter umiddelbart ei maskinoversetting. Sjølv om maskinoversettingar generelt har lågare kvalitet samanlikna med AI-oversettingane våre, gir dei 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 ho erstatte maskinomsetjinga og bli sendt kvar gong du etterspør omsetjingar for strengene dine.

Hvis du har oversett ein streng manuelt, vil desse omsetjingane ha prioritet og blir returnerte i staden.

Bruke opphav

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

import {TacoTranslate} from 'tacotranslate/react';

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

Origins lar deg separere tekststrengjer i meiningfulle behaldarar. Til dømes kan du ha ein origin for dokumentasjon og ein annan for marknadssida di.

For meir granulær kontroll kan du sette opp origins på komponentnivå.

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

Vennligst merk at den same strengen kan få ulike omsettingar i forskjellige opphav.

Til slutt er det opp til deg og dine behov korleis du skil strengjer inn i origins. Merk likevel at det å ha mange strengjer innanfor ein origin kan auke lastetida.

Handtering av variablar

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

Variablar i strengjer blir deklarerte med doble klammeparantesar, 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 rendrar Translate komponenten HTML-innhald. Du kan likevel velje å ikkje bruke denne funksjonen ved å sette useDangerouslySetInnerHTML til false.

Å slå av HTML-rendering er sterkt anbefalt når ein omset utrygge innhald, som til dømes brukar-generert innhald.

All utdata blir alltid rensa med sanitize-html før vising.

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

Eksempelet over vil bli vist som vanleg tekst.

Serverside-rendering