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édprogram.

Az Translate komponens használata.
Fordításokat jelenít meg egy span elemben, és támogatja a HTML renderelést.

import {Translate} from 'tacotranslate/react';

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

A komponensen például az as="p" használatával megváltoztathatja az elem típusát.

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édprogram használata.
Fordítsd le a szövegeket szerver oldalon. Turbozd fel a OpenGraph képeidet.

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 kerülnek lefordításra a stringek

Amikor a szövegek eljutnak a szervereinkhez, először ellenőrizzü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álaszidőt biztosítanak.

Ezzel egyidejűleg elindítunk egy aszinkron fordítási feladatot, hogy magas színvonalú, csúcstechnológiás AI fordítást készítsünk az Ön szövegéhez. Amint az AI fordítás elkészül, az felül fogja írni a gépi fordítást, és akkor kerül elküldésre, amikor fordítást kér a szövegeire.

Ha manuálisan lefordított egy karakterláncot, akkor azok a fordítások élveznek elsőbbséget, és azok kerülnek visszaadásra helyette.

Az eredetek használata

A TacoTranslate projektek tartalmazzák az úgynevezett origins-eket. 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 konténerekbe rendezd. Például lehet egy origin a dokumentációhoz, és egy másik a marketing oldaladhoz.

A részletesebb vezérlés érdekében beállíthatja az originöket komponens szinten.

Ennek eléréséhez fontolja meg, hogy a projektjében több TacoTranslate szolgáltatót használ.

Kérjük, vegye figyelembe, hogy ugyanaz a szöveg különböző origins esetén eltérő fordításokat kaphat.

Végső soron, hogy hogyan választod szét a szövegeket originökbe, az rajtad és az igényeiden múlik. Ugyanakkor vedd figyelembe, hogy ha sok szöveg van egy originben, az megnö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 hasonlókhoz mindig változókat kell használnod.

A változók a sztringekben dupla zárójelek között 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 ezt a viselkedést kikapcsolhatod, ha a useDangerouslySetInnerHTML értékét false -ra állítod.

Az HTML megjelenítés letiltása erősen ajánlott, amikor megbízhatatlan tartalmakat, például felhasználók által generált tartalmakat fordítasz.

Minden kimenet megjelenítés előtt mindig megtisztítva van 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 egyszerű szövegként lesz megjelenítve.

Szerveroldali renderelés