TacoTranslate
/
DokumentasjonPrisar
 
  1. Innleiing
  2. Kom i gang
  3. Oppsetjing og konfigurasjon
  4. Bruke TacoTranslate
  5. Serverside-gjengiving
  6. Avansert bruk
  7. Beste praksisar
  8. Feilhandsaming og feilsøking
  9. Støtta språk

Bruke TacoTranslate

Omsetjing av strengar

Det finst for tida tre måtar å omsetje tekststrengar på: Translate komponenten, useTranslation hooken, eller translateEntries-verktøyet.


Bruke Translate‑komponenten.
Viser omsetjingar inne i eit span element, og støttar rendering 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 hooken.
Returnerer omsetjingar som ein vanleg streng. Nyttig i, til dømes, meta taggar.

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å serversida. Forsterk OpenGraph bileta dine.

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

Korleis strengar blir omsette

Når strengane når serverane våre, validerer og lagrar vi dei først, og returnerer umiddelbart ein maskinoversetting. Maskinoversettingar er som regel lågare i kvalitet samanlikna med AI-oversettingane våre, men dei gir eit raskt første svar.

Samtidig startar vi eit asynkront omsetjingsoppdrag for å lage ei høgkvalitets, toppmoderne AI-omsetjing av strengen din. Når AI-omsetjinga er klar, vil ho erstatte maskinomsetjinga og bli sendt kvar gong du ber om omsetjingar for strengane dine.

Dersom du har omsett ein streng manuelt, vil desse omsetjingane ha prioritet og bli returnerte i staden.

Bruk av opprinnelsar

TacoTranslate-prosjekt inneheld det vi kallar origins. Sjå på dei som inngangspunkter, mappar eller grupper for strengane og omsetjingane dine.

import {TacoTranslate} from 'tacotranslate/react';

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

Originar lar deg skilje tekststrengar i meiningsefylte behaldarar. Til dømes kan du ha ein origin for dokumentasjonen og ein annan for marknadssida di.

For meir detaljert kontroll kan du setje opp origins på komponentnivå.

For å oppnå dette, vurder å bruke fleire TacoTranslate tilbydarar i prosjektet ditt.

Ver merksam på at den same strengen kan få ulike omsetjingar i ulike originar.

Til slutt er det opp til deg og behova dine korleis du deler tekststrangar inn i originar. Merk likevel at å ha mange tekststrangar i ein origin kan auke innlastingstidene.

Handtering av variablar

Du bør alltid bruke variablar for dynamisk innhald, som til dømes brukarnamn, datoar, e-postadresser og meir.

Variablar i strengar vert deklarert med doble krøllparentesar, 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}});
}

Handsaming av HTML-innhald

Som standard støttar komponenten Translate og renderar HTML-innhald. Du kan likevel velje å slå av denne åtferda ved å setje useDangerouslySetInnerHTML til false.

Det anbefalast sterkt å deaktivere HTML-rendering når du omset innhald som ikkje kan stolast på, som brukarprodusert innhald.

Alt innhald blir alltid rensa med sanitize-html før det blir vist.

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

Dømet ovanfor blir vist som rein tekst.

Serverside-gjengiving

Eit produkt frå NattskiftetLaga i Noreg