Dokumentasjon: Bruke TacoTranslate

Bruke TacoTranslate

Norwegian (Nynorsk)

Oversetting av tekststrengar

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 ein 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 omsetjingar som ein rein 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 strenger på serversida. Gi eit kraftig løft 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 kjem til serverane våre, validerer og lagrar vi dei først, og returnerer deretter umiddelbart ein 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 den erstatte maskinomsetjinga og bli sendt kvar gong du etterspør omsetjingar for strengene dine.

Dersom du har omsett ein streng manuelt, vil desse omsetjingane ha høgare prioritet og bli returnerte i staden.

Bruke opphav

TacoTranslate-prosjekt inneheld det vi kallar origins. Tenk på dei som inngangspunkt, mapper 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 meiningsfulle behaldarar. Til dømes kan du ha éin origin for dokumentasjon og ein annan for marknadsføringssida di.

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

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

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

Til slutt er det opp til deg og dine behov korleis du deler opp tekststrengene i originar. Merk likevel at å ha mange strengar i éin 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 tekststrenger blir deklarerte ved bruk av 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}});
}

Handtering av HTML-innhald

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

Å deaktivere HTML-rendring blir sterkt anbefalt når ein omset innhald som ikkje er til å stole på, slik som brukarprodusert innhald.

All utdata blir alltid rensa med sanitize-html før dei 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}
		/>
	);
}

Det ovanforståande dømet vil bli vist som vanleg tekst.

Tjener-side omforming