Dokumentasjon: Bruk av 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.
Returnerer oversettelser innenfor 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 for eksempel å bruke as="p" på komponenten.

Bruk av useTranslation hooken.
Returnerer oversettelser som en ren streng. Nyttig i, for eksempel, meta tagger.

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 verktøyet translateEntries.
Oversett strenger på serversiden. Gi OpenGraph bildene dine ekstra kraft.

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

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

Samtidig starter vi et asynkront oversettelsesoppdrag for å generere en høykvalitets, toppmoderne AI-oversettelse for 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, får disse oversettelsene forrang og returneres i stedet.

Bruk av origins

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

import {TacoTranslate} from 'tacotranslate/react';

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

Origins lar deg organisere strenger 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 provider-komponenter i prosjektet ditt.

Vær oppmerksom på at samme streng kan få forskjellige oversettelser i ulike origins.

Hvordan du skiller strengene inn i origins, bestemmer du selv ut fra behovene dine. Merk imidlertid at mange strenger i én origin kan øke lastetiden.

Håndtering av variabler

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

Variabler i strenger angis ved hjelp av doble krøllparenteser, 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 og rendrer Translate komponenten HTML-innhold. Du kan imidlertid deaktivere denne oppførselen ved å sette useDangerouslySetInnerHTML til false.

Det anbefales sterkt å deaktivere HTML-rendering når du oversetter innhold som ikke er pålitelig, for eksempel brukergenerert innhold.

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

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 gjengitt som ren tekst.

Rendering på serversiden

Bruke TacoTranslate

Hvordan strenger oversettes

Bruk av origins

Håndtering av variabler

Håndtere HTML-innhold