Dokumentasjon: Bruke TacoTranslate

Bruke TacoTranslate

Norwegian (Nynorsk)

Oversetting av strengjer

Det finst for tida tre måtar å omsetje strengjer på: Translate komponenten, useTranslation hook-en, eller translateEntries nytten.

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, for eksempel, as="p" på komponenten.

Bruke useTranslation hooken.
Returnerer omsettingar som vanleg tekst. 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 tekststrenger på serversida. Gi 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 maskinomsetjing. Sjølv om maskinomsetjingar generelt er lågare i kvalitet samanlikna med AI-omsetjingane våre, gir dei eit raskt første respons.

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 maskinomeitjinga og bli sendt kvar gong du etterspør omsetjingar for strengene dine.

Dersom du har omsett ein streng manuelt, går desse omsetjingane føre og blir returnerte i staden.

Bruke opphav

TacoTranslate-prosjekt inneheld det vi kallar origins. Sjå 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 dele strenger inn i meningsfulle beholdere. Til dømes kan du ha ein origin for dokumentasjon og ein annan for marknadssida di.

For meir detaljert kontroll kan du setje 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 ulike originar.

Til syvende og sist er det opp til deg og dine behov korleis du skil strengjer i originar. Merk likevel at det å ha mange strengjer innanfor éin 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 tekststrengar blir erklært med dobbelte klammer, 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 åtferda ved å setje useDangerouslySetInnerHTML til false.

Å deaktivere HTML-rending er sterkt anbefalt når du oversetter innhald som ikkje er påliteleg, som til dømes 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}
		/>
	);
}

Eksempelet ovanfor vil bli vist som vanleg tekst.

Server-side rendering