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

Bruk av useTranslation hook.
Returnerer oversettelser som en vanlig tekststreng. 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 tekststrenger på serversiden. Gi dine OpenGraph bilder et kraftig løft.

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 oversettes

Når tekststrenger 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 sendes hver gang du ber om oversettelser av strengene dine.

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

Bruk av opprinnelser

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

Origins lar deg dele strenger inn i meningsfulle beholdere. For eksempel kan du ha én 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 samme tekststreng kan få forskjellige oversettelser i ulike opprinnelser.

Til syvende og sist er det opp til deg og dine behov hvordan du deler strenger inn i origins. Merk imidlertid at 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 angis med doble krøllparenteser, for eksempel {{variable}}.

Håndtere HTML-innhold

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

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

Alt innhold blir alltid sanitert 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 gjengitt som ren tekst.