Dokumentation: Använda TacoTranslate

Använda TacoTranslate

Swedish

Översätta strängar

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

Använd Translate komponenten.
Visar översättningar i ett span element och stöder 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ända translateEntries‑verktyget.
Översätt strängar på serversidan. Ge dina OpenGraph-bilder extra kraft.

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 i allmänhet håller lägre kvalitet jämfört med våra AI-översättningar, ger de ett snabbt initialt 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 manuellt har översatt en sträng prioriteras dessa översättningar 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 dela upp 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 origins.

Slutligen är det upp till dig och dina behov hur du fördelar strängar mellan origins. Observera dock att många strängar i samma origin kan öka laddningstiderna.

Hantering av variabler

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

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 att avstå från detta beteende genom att ställa in useDangerouslySetInnerHTML till false.

Det rekommenderas starkt att inaktivera HTML-rendering när du översätter otillförlitligt innehåll, såsom användargenererat innehåll.

Allt utdata rensas 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