A TacoTranslate használata
Karakterláncok fordítása
Jelenleg három módja van a karakterláncok fordításának: a Translate
komponens, a useTranslation
hook vagy a translateEntries
segédprogram.
A Translate
komponens használata.
Fordításokat jelenít meg span
elemben, és támogatja a HTML megjelenítést.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Az elem típusát megváltoztathatja például a komponensen az as="p"
használatával.
Az useTranslation
hook használata.
Egy egyszerű szövegként adja vissza a fordításokat. Hasznos például meta
címkékben.
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>
);
}
translateEntries
segédprogram használata.
Fordítsa le a karakterláncokat a szerveroldalon. Tegye még hatékonyabbá 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 történik a szövegek fordítása
Amikor a szövegek elérik 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, hogy magas színvonalú, korszerű AI fordítást készítsünk a sztringedhez. Amint az AI fordítás elkészül, felváltja a gépi fordítást és elküldésre kerül, amikor csak fordítást kérsz a sztringjeidhez.
Ha egy sztringet manuálisan lefordítottál, azok a fordítások élveznek elsőbbséget, és helyette azok kerülnek visszaadásra.
Források használata
A TacoTranslate projektek tartalmazzák az úgynevezett eredeteket. Gondolj rájuk úgy, mint belépési pontokra, mappákra vagy csoportokra a karakterláncaid é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 karakterláncokat értelmes konténerekbe különítsd el. 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én belül több TacoTranslate szolgáltatót használ.
Kérjük, vegye figyelembe, hogy ugyanaz a szöveg különböző eredeteken belül eltérő fordításokat kaphat.
Végső soron, hogy hogyan választod szét a szövegeket originökbe, 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
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 ezt a viselkedést letilthatod, ha a useDangerouslySetInnerHTML
értékét false
értékre állítod.
HTML megjelenítés letiltása erősen ajánlott megbízhatatlan tartalom, például felhasználók által generált tartalom fordítása esetén.
Minden kimenet mindig megtisztításra kerül 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.