A TacoTranslate használata
Sztringek fordítása
Jelenleg három módon fordíthatók a szövegek: az Translate
komponenssel, az useTranslation
hookkal vagy a translateEntries
segédprogrammal.
A Translate
komponens használata.
Fordításokat ad ki egy 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"
használatával a komponensen.
Az useTranslation
hook használata.
Fordításokat egyszerű szövegként ad vissza. 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>
);
}
Az translateEntries
segédprogram használata.
Fordítsa le a szövegeket a szerver oldalon. Tegye még erősebbé OpenGraph képeit.
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 fordítódnak a karakterláncok
Amikor a szövegek elérik a szervereinket, először érvényesítjük és elmentjük őket, majd azonnal visszaadunk 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.
Ezzel egyidejűleg elindítunk egy aszinkron fordítási feladatot, hogy létrehozzunk egy magas színvonalú, korszerű AI alapú fordítást a szövegedhez. Amint az AI fordítás elkészül, lecseréli a gépi fordítást, és elküldésre kerül, amikor csak lekéred a szövegeid fordításait.
Ha manuálisan lefordított egy sztringet, akkor azok a fordítások elsőbbséget élveznek, és helyette azok kerülnek visszaadásra.
Originok használata
A TacoTranslate projektek tartalmazzák azt, amit eredetnek nevezünk. Gondolj rájuk úgy, mint bejáratokra, 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 eredetek lehetővé teszik, hogy a karakterláncokat jelentőségteljes tárolókba rendezd. Például lehet egy eredeted 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 a komponens szintjén.
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, hogy hogyan választod szét a szövegeket origin-ökbe, az rajtad és az igényeiden múlik. Azonban vedd figyelembe, hogy ha sok szöveg van egy origin-ben, az megnövelheti a betöltési időket.
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 egyébhez.
A változók a szövegekben 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 lemondhatsz erről a működésről, ha a useDangerouslySetInnerHTML
értékét false
-ra állítod.
Az HTML megjelenítés letiltása erősen ajánlott, amikor nem megbízható tartalom, például felhasználók által generált tartalom fordítására kerül sor.
Minden kimenet mindig szűrésre kerül a sanitize-html segítségével, mielőtt megjelenik.
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.