A TacoTranslate használata
Stringek fordítása
Jelenleg három módja van a karakterláncok lefordításának: a Translate
komponens, a useTranslation
hook, vagy a translateEntries
segédprogram.
A Translate
komponens használata.
A fordításokat egy span
elemben jeleníti meg, és támogatja a HTML renderelését.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Az elem típusát például megváltoztathatja a komponensen a as="p"
használatával.
A useTranslation
hook használata.
A fordításokat sima szövegként adja vissza. 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>
);
}
Az translateEntries
segédprogram használata.
Fordítsd a szövegeket 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 fordítódnak a szövegek
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.
Ugyanakkor elindítunk egy aszinkron fordítási feladatot, hogy magas színvonalú, élvonalbeli AI-fordítást készítsünk a karakterláncához. Amint az AI-fordítás elkészül, az felváltja a gépi fordítást és elküldjük, amikor csak lekéri a karakterláncai fordítását.
Ha manuálisan lefordítottál egy karakterláncot, ezek a fordítások élveznek elsőbbséget, és azokat adjuk vissza.
Originok használata
A TacoTranslate-projektek tartalmazzák azt, amit origins-nak nevezünk. Gondolj rájuk úgy, mint a szövegeid és fordításaid 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 karakterláncokat értelmes tárolókba csoportosítsd. Például lehet egy origin a dokumentációhoz és egy másik a marketingoldaladhoz.
Részletesebb vezérlés érdekében komponensszinten beállíthatod az originokat.
Ennek eléréséhez fontolja meg, hogy a projektjében több TacoTranslate szolgáltatót használjon.
Kérjük, vegye figyelembe, hogy ugyanaz a karakterlánc különböző eredetekben eltérő fordítást kaphat.
Végső soron az, hogy hogyan osztod szét a sztringeket originokba, rajtad és az igényeiden múlik. Azonban vedd figyelembe, hogy ha egy originben sok sztring van, az növelheti a betöltési időt.
Változók kezelése
Dinamikus tartalomhoz mindig változókat kell használnod, például felhasználóneveket, dátumokat, e-mail címeket és egyebeket.
A változókat a karakterláncokban dupla kapcsos zárójelek között 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 megjeleníti a HTML-tartalmat. Ha azonban nem szeretnéd ezt a viselkedést, állítsd be a useDangerouslySetInnerHTML
értékét false
-ra.
A HTML megjelenítésének letiltása erősen ajánlott, amikor nem megbízható tartalmat, például felhasználók által létrehozott tartalmat fordítasz.
Minden kimenetet mindig a sanitize-html segítségével tisztítunk meg a megjelenítés előtt.
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.