Dokumentasjon: Bruke TacoTranslate

Bruke TacoTranslate

Norwegian (Bokmål)

Oversette strenger

Det finnes for øyeblikket tre måter å oversette strenger på: Translate komponenten, useTranslation hooken, eller translateEntries-verktøyet.

Bruke Translate komponenten.
Viser oversettelser i et span element, og støtter gjengivelse 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 oversettelser som en enkel tekststreng. Nyttig for eksempel i meta tags.

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å serversiden. Forbedre OpenGraph bildene dine.

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

Hvordan strenger blir oversatt

Når strengene når serverne våre, validerer og lagrer vi dem først, og returnerer deretter umiddelbart en maskinoversettelse. Selv om maskinoversettelser vanligvis er av lavere kvalitet enn våre AI-oversettelser, gir de et raskt første svar.

Samtidig starter vi en asynkron oversettelsesjobb for å generere en høykvalitets, toppmoderne AI-oversettelse av strengen din. Når AI-oversettelsen er klar, vil den erstatte maskinoversettelsen og bli sendt hver gang du ber om oversettelser for strengene dine.

Hvis du har oversatt en streng manuelt, har disse oversettelsene prioritet og returneres i stedet.

Bruke originene

TacoTranslate-prosjekter inneholder det vi kaller origins. Tenk på dem som inngangspunkter, mapper eller grupper for strengene og oversettelsene dine.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins lar deg organisere tekststrenger i meningsfulle beholdere. For eksempel kan du ha en origin for dokumentasjonen og en annen for markedsføringssiden din.

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

For å oppnå dette, vurder å bruke flere TacoTranslate leverandører i prosjektet ditt.

Vær oppmerksom på at den samme strengen kan få ulike oversettelser i forskjellige opprinnelser.

Til syvende og sist er det opp til deg og dine behov hvordan du fordeler strengene i origins. Merk imidlertid at det å ha mange strenger i én origin kan øke lastetidene.

Håndtering av variabler

Du bør alltid bruke variabler for dynamisk innhold, for eksempel brukernavn, datoer, e-postadresser og mer.

Variabler i strenger deklareres ved å bruke doble klammer, for eksempel {{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}});
}

Håndtere HTML-innhold

Som standard støtter Translate komponenten og gjengir HTML-innhold. Du kan imidlertid deaktivere denne oppførselen ved å sette useDangerouslySetInnerHTML til false.

Det anbefales sterkt å deaktivere HTML-rendering når du oversetter upålitelig innhold, for eksempel brukergenerert innhold.

Alt innhold blir alltid renset med sanitize-html før det gjengis.

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

Eksemplet ovenfor vil bli vist som ren tekst.

Gjengivelse på serversiden