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.
Gir 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 en vanlig tekststreng. Nyttig i for eksempel 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. Gi ekstra kraft 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 strenger når våre servere, validerer og lagrer vi dem først, og returnerer deretter umiddelbart en maskinoversettelse. Selv om maskinoversettelser generelt er av lavere kvalitet sammenlignet med våre AI-oversettelser, gir de et raskt første svar.

Samtidig starter vi et asynkront oversettelsesoppdrag for å generere en førsteklasses, avansert AI-oversettelse for strengen din. Når AI-oversettelsen er klar, vil den erstatte maskinoversettelsen og sendes hver gang du etterspør oversettelser for strengene dine.

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

Utnytte opprinnelser

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

import {TacoTranslate} from 'tacotranslate/react';

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

Origins lar deg skille 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 providere i prosjektet ditt.

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

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

Håndtering av variabler

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

Variabler i strenger erklæres ved bruk 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}});
}

Administrere 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 sterkt når du oversetter ikke-pålitelig innhold, slik som brukeropprettet innhold.

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

Eksempelet ovenfor vil bli vist som ren tekst.

Gjengivelse på serversiden

Bruke TacoTranslate

Hvordan strenger oversettes

Utnytte opprinnelser

Håndtering av variabler

Administrere HTML-innhold