Dokumentáció: TacoTranslate használata

A TacoTranslate használata

Hungarian

Karakterláncok fordítása

Jelenleg három módja van a szövegek fordításának: a Translate komponens, a useTranslation hook, vagy a translateEntries segédeszköz.

A Translate komponens használata.
Fordításokat jelenít meg span elemben, és támogatja a HTML megjelenítését.

import {Translate} from 'tacotranslate/react';

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

Az elem típusát megváltoztathatja például az as="p" beállításával a komponensen.

A useTranslation hook használata.
Egyszerű szövegként adja vissza a fordításokat. Hasznos például meta tagekben.

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

A translateEntries segédeszköz használata.
Fordítsd le a sztringeket a szerver oldalon. Tegyél szárnyakat a OpenGraph képeidnek.

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

Hogyan történik a karakterláncok fordítása

Amikor a sztringek elérik a szervereinket, először érvényesítjük és elmentjük őket, majd azonnal visszaküldünk egy gépi fordítást. Bár a gépi fordítások általában alacsonyabb minőségűek az AI fordításainkhoz képest, gyors kezdeti választ biztosítanak.

Ugyanakkor elindítunk egy aszinkron fordítási feladatot, amely egy kiváló minőségű, csúcstechnológiás mesterséges intelligencia által készített fordítást generál az Ön szövegéhez. Amint az MI-által készített fordítás elkészül, felváltja a gépi fordítást, és akkor kerül elküldésre, amikor kér fordításokat a szövegeihez.

Ha manuálisan lefordított egy karakterláncot, azok a fordítások elsőbbséget élveznek, és helyette azokat adja vissza.

Eredetek kihasználása

A TacoTranslate projektek tartalmazzák az úgynevezett origins-okat. Gondolj rájuk úgy, mint belépési pontokra, mappákra vagy csoportokra a szövegeid és fordításaid számára.

import {TacoTranslate} from 'tacotranslate/react';

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

Az Origins lehetővé teszi, hogy a szövegeket jelentőségteljes tartályokba rendezd. Például lehet egy origin a dokumentációhoz és egy másik a marketing oldaladhoz.

A még részletesebb vezérlés érdekében beállíthatja az originöket a komponens szintjén.

Ehhez fontolja meg, hogy több TacoTranslate szolgáltatót használjon a projektjében.

Kérjük, vegye figyelembe, hogy ugyanaz a sztring különböző eredetekben eltérő fordítást kaphat.

Végső soron az, hogy hogyan választod szét a sztringeket originökbe, rajtad és az igényeiden múlik. Azonban vedd figyelembe, hogy ha sok sztring van egy originben, az növelheti a betöltési időket.

Változók kezelése

Dinamikus tartalomhoz, például felhasználónevekhez, dátumokhoz, e-mail címekhez és még sok máshoz mindig használjon változókat.

A változók a szövegekben dupla zárójelpárokkal vannak deklarálva, például {{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}});
}

HTML tartalom kezelése

Alapértelmezés szerint a Translate komponens támogatja és megjeleníti a HTML tartalmat. Azonban kikapcsolhatja ezt a viselkedést, ha a useDangerouslySetInnerHTML értékét false értékre állítja.

Az HTML megjelenítés letiltása szigorúan ajánlott megbízhatatlan tartalmak, például felhasználók által generált tartalmak fordításakor.

Minden kimenet megjelenítés előtt mindig megtisztításra kerül a sanitize-html segítségével.

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

A fenti példa sima szövegként lesz megjelenítve.

Szerveroldali megjelenítés