TacoTranslate
/
DokumentációÁrazás
 
  1. Bevezetés
  2. Első lépések
  3. Beállítás és konfiguráció
  4. TacoTranslate használata
  5. Szerveroldali renderelés
  6. Haladó használat
  7. Legjobb gyakorlatok
  8. Hibakezelés és hibakeresés
  9. Támogatott nyelvek

TacoTranslate használata

Karakterláncok fordítása

Jelenleg háromféle módja van a sztringek lefordításának: a Translate komponens, a useTranslation hook vagy a translateEntries segédprogram.


A Translate komponens használata.
Fordításokat egy span elemben ad ki, é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 például a komponensen as="p" használatával megváltoztathatja.


A useTranslation hook használata.
Visszaadja a fordításokat egyszerű szövegként. Hasznos például a 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.
Szövegek fordítása a szerveroldalon. Turbózd fel az 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 történik a karakterláncok fordítása

Amikor a szövegek 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ásainknál, gyors kezdeti választ biztosítanak.

Egyidejűleg elindítunk egy aszinkron fordítási feladatot, amely a szöveghez magas minőségű, csúcstechnológiás MI-fordítást készít. Amint az MI-fordítás elkészül, helyettesíti a gépi fordítást, és elküldjük, amikor csak fordításokat kérsz a szövegeidhez.

Ha manuálisan lefordítottál egy stringet, a manuális fordítások élveznek elsőbbséget, és azokat adjuk vissza.

Eredetek használata

A TacoTranslate-projektek tartalmazzák azt, amit mi origins-nak nevezünk. Gondoljon rájuk úgy, mint a szövegei és fordításai belépési pontjaira, mappáira vagy csoportjaira.

import {TacoTranslate} from 'tacotranslate/react';

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

Az originok lehetővé teszik, hogy a szövegeket értelmes csoportokba rendezd. Például lehet egy origin a dokumentációhoz és egy másik a marketingoldaladhoz.

Részletesebb vezérlés érdekében komponens szinten állíthatsz be originokat.

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

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

Végső soron rajtad és az igényeiden múlik, hogyan választod szét a stringeket originokra. Ugyanakkor vedd figyelembe, hogy ha sok string található egy originben, az megnövelheti a betöltési időt.

Változók kezelése

Mindig használj változókat dinamikus tartalomhoz, például felhasználónevekhez, dátumokhoz, e-mail-címekhez és egyebekhez.

A szövegekben szereplő változókat dupla kapcsos zárójelek használatával deklaráljuk, 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 rendereli a HTML-tartalmat. Ha azonban ki szeretné kapcsolni ezt a viselkedést, állítsa a useDangerouslySetInnerHTML értékét false értékre.

A HTML megjelenítésének letiltása erősen ajánlott, ha megbízhatatlan tartalmakat, például felhasználók által létrehozott tartalmakat fordítunk.

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

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 jelenik meg.

Szerveroldali renderelés

Egy termék a Nattskiftet-tőlNorvégiában készült