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

Bruke useTranslation hook.
Returnerer oversettelser som vanlig tekst. Nyttig for eksempel i 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 translateEntries verktøyet.
Oversett strenger på serversiden. Gi et ekstra løft til dine OpenGraph bilder.

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 strengene 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 sammenlignet med 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 tekststreng manuelt, har disse oversettelsene forrang og returneres i stedet.

Bruke opprinnelser

TacoTranslate-prosjekter inneholder det vi kaller origins. Se 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 dele opp strenger i meningsfulle beholdere. For eksempel kan du ha én origin for dokumentasjon og en annen for markedsføringssiden din.

For mer detaljert kontroll kan du sette opp origins på komponentnivå.

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

Vennligst merk at den samme teksten kan få forskjellige oversettelser i ulike origins.

Til syvende og sist er det opp til deg og dine behov hvordan du deler opp strenger i origins. Vær imidlertid oppmerksom på at mange strenger i én origin kan øke lastetiden.

Håndtering av variabler

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

Variabler i strenger deklareres ved hjelp av doble klammer, slik 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}});
}

Håndtering av HTML-innhold

Som standard støtter og gjengir Translate komponenten HTML-innhold. Du kan imidlertid velge å ikke bruke denne funksjonen ved å sette useDangerouslySetInnerHTML til false.

Deaktivering av HTML-rendering anbefales på det sterkeste når man oversetter upålitelig innhold, slik som bruker-generert innhold.

All output blir alltid renset med sanitize-html før det vises.

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.

Gjengivelse på serversiden

Bruke TacoTranslate

Hvordan strenger oversettes

Bruke opprinnelser

Håndtering av variabler

Håndtering av HTML-innhold