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 omsetjingar innan 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 hooken.
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 strengjer på serversida. Gi eit ekstra 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 vert omsette

Når strengjer når serverane våre, validerer og lagrar vi dei først, deretter returnerer vi umiddelbart ein maskinoversetting. Sjølv om maskinoversettingar vanlegvis er av lågare kvalitet samanlikna med AI-oversettingane våre, gir dei eit raskt første svar.

Samtidig startar vi eit asynkront omsetjingsoppdrag for å lage 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 strengane dine.

Om du har omsett ei tekst manuelt, har dei omsetjingane høgare prioritet og blir 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 strengjer i meiningsfulle behaldarar. Til dømes kan du ha ein origin for dokumentasjon og ein annan for marknadsføringssida di.

For meir granulær 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 omsettingar i ulike originar.

Til sists er det opp til deg og dine behov korleis du deler opp strengjer i originar. Merk likevel at å ha mange strengjer innanfor éin origin kan auke lastetida.

Handtering av variablar

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

Variablar i strengjer blir deklarerte med dobbelte klammeparentesar, 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}});
}

Administrere HTML-innhald

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

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

All utskrift blir alltid rensa med sanitize-html før den 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.

Server-side rendering