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.

Bruk av 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 hook.
Returnerer oversettelser som en vanlig streng. 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 OpenGraph bildene dine 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)
	};
}

Når strengene når serverne våre, validerer og lagrer vi dem først, og returnerer 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 for strengen din. Når AI-oversettelsen er klar, vil den erstatte maskinoversettelsen og bli sendt hver gang du ber om oversettelser av strengene dine.

Hvis du har oversatt en streng manuelt, har disse oversettelsene forrang og blir returnert i stedet.

Bruk av opprinnelser

TacoTranslate-prosjekter inneholder det vi kaller origins. Se 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>
	);
}

Opprinnelser lar deg organisere tekststrenger i meningsfulle containere. For eksempel kan du ha én opprinnelse 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.

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

Til syvende og sist er det opp til deg og dine behov hvordan du deler strenger inn 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 hjelp av doble krøllparenteser, 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 Translate komponenten HTML-innhold og gjengir det. Du kan imidlertid velge bort 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.

Alle utdata blir alltid renset med sanitize-html før de 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.

Rendering på serversiden

Bruke TacoTranslate

Hvordan strenger oversettes

Bruk av opprinnelser

Håndtering av variabler

Håndtering av HTML-innhold