Dokumentation: Använda TacoTranslate

Använda TacoTranslate

Swedish

Översättning av strängar

Det finns för närvarande tre sätt att översätta strängar: Translate‑komponenten, useTranslation‑hooken eller translateEntries-verktyget.

Använd Translate komponenten.
Returnerar översättningar inom ett span element och stödjer rendering av HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Du kan ändra elementtypen genom att till exempel använda as="p" på komponenten.

Att använda useTranslation hooken.
Returnerar översättningar som en vanlig sträng. Användbart till exempel i 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>
	);
}

Använd translateEntries verktyget.
Översätt strängar på serversidan. Ta dina OpenGraph bilder till nästa nivå.

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 strängar når våra servrar validerar och sparar vi dem först och returnerar sedan omedelbart en maskinöversättning. Även om maskinöversättningar vanligtvis håller lägre kvalitet jämfört med våra AI-översättningar, ger de ett snabbt första svar.

Samtidigt initierar vi ett asynkront översättningsjobb för att generera en högkvalitativ, toppmodern AI-översättning för din sträng. När AI-översättningen är klar kommer den att ersätta maskinöversättningen och skickas ut varje gång du begär översättningar för dina strängar.

Om du manuellt har översatt en sträng prioriteras dessa översättningar och returneras istället.

Använda origins

TacoTranslate-projekt innehåller det vi kallar origins. Tänk på dem som ingångspunkter, mappar eller grupper för dina strängar och översättningar.

import {TacoTranslate} from 'tacotranslate/react';

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

Ursprung låter dig dela upp strängar i meningsfulla behållare. Till exempel kan du ha ett ursprung för dokumentation och ett annat för din marknadsföringssida.

För mer detaljerad kontroll kan du konfigurera origins på komponentnivå.

För att uppnå detta, överväg att använda flera TacoTranslate leverantörer i ditt projekt.

Observera att samma sträng kan få olika översättningar i olika ursprung.

I slutändan är det upp till dig och dina behov hur du fördelar strängarna mellan origins. Tänk dock på att många strängar i en och samma origin kan öka laddningstiderna.

Hantera variabler

Du bör alltid använda variabler för dynamiskt innehåll, såsom användarnamn, datum, e‑postadresser och mer.

Variabler i strängar deklareras med dubbla klammerparenteser, till exempel {{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}});
}

Hantera HTML-innehåll

Som standard stöder och renderar Translate komponenten HTML-innehåll. Du kan dock välja bort detta beteende genom att sätta useDangerouslySetInnerHTML till false.

Det rekommenderas starkt att inaktivera rendering av HTML när du översätter otillförlitligt innehåll, till exempel användargenererat innehåll.

Allt utdata saneras alltid med sanitize-html innan det renderas.

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

Exemplet ovan kommer att renderas som vanlig text.

Serversidig rendering

Använda TacoTranslate

Hur strängar översätts

Använda origins

Hantera variabler

Hantera HTML-innehåll