Dokumentation: Använda TacoTranslate

Använda TacoTranslate

Swedish

Översätta strängar

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

Att använda Translate komponenten.
Visar översättningar i ett span element, och kan rendera 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.

Använd useTranslation hooken.
Returnerar översättningar som en vanlig sträng. Användbart i till exempel 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. Förstärk dina 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 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 generellt håller lägre kvalitet jämfört med våra AI‑översättningar ger de ett snabbt första svar.

Samtidigt startar vi ett asynkront översättningsjobb för att ta fram en högkvalitativ, toppmodern AI-översättning av din sträng. När AI-översättningen är klar kommer den att ersätta maskinöversättningen och skickas när du begär översättningar av dina strängar.

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

Använda ursprung

TacoTranslate-projekt innehåller det vi kallar ursprung. 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>
	);
}

Origins låter dig separera strängar i meningsfulla behållare. Till exempel kan du ha en origin för dokumentation och en annan för din marknadsföringssida.

För mer granulär 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 delar upp strängar i origins. Tänk dock på att många strängar i en och samma origin kan öka laddningstiderna.

Hantering av variabler

Du bör alltid använda variabler för dynamiskt innehåll, såsom användarnamn, datum, e-postadresser med mera.

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

Hantera HTML-innehåll

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

Det rekommenderas starkt att inaktivera HTML-rendering när man översätter innehåll som inte är betrott, 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}
		/>
	);
}

Ovanstående exempel kommer att renderas som vanlig text.

Rendering på serversidan

Använda TacoTranslate

Hur strängar översätts

Använda ursprung

Hantering av variabler

Hantera HTML-innehåll