Përdorimi i TacoTranslate
Përkthimi i vargjeve
Aktualisht ka tre mënyra për të përkthyer vargjet: Komponenti Translate
, hook-u useTranslation
ose shërbimi translateEntries
.
Përdorimi i komponentit Translate
.
Shfaq përkthime brenda një elementi span
, dhe mbështet renderimin e HTML-së.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Mund të ndryshoni llojin e elementit duke përdorur, për shembull, as="p"
në komponent.
Përdorimi i useTranslation
hook.
Kthen përkthime si një varg të thjeshtë. E dobishme, për shembull, në etiketa meta
.
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>
);
}
Përdorimi i shërbimit të translateEntries
Përkthe vargjet në anën e serverit. Forco imazhet tua OpenGraph.
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)
};
}
Si përkthehen vargjet
Kur vargjet arrijnë në serverat tanë, ne së pari i verifikojmë dhe i ruajmë, pastaj menjëherë kthejmë një përkthim me makinë. Ndërsa përkthimet me makinë zakonisht janë më pak cilësore krahasuar me përkthimet tona me AI, ato ofrojnë një përgjigje të shpejtë fillestare.
Njëkohësisht, ne fillojmë një detyrë përkthimi asinkron për të gjeneruar një përkthim me inteligjencë artificiale të cilësisë së lartë dhe të avancuar për vargun tuaj. Pasi përkthimi me AI të jetë gati, ai do të zëvendësojë përkthimin me makinë dhe do të dërgohet sa herë që kërkoni përkthime për vargjet tuaja.
Nëse keni përkthyer manualisht një varg, ato përkthime kanë përparësi dhe kthehen në vend të tyre.
Përdorimi i origjinave
Projektet TacoTranslate përmbajnë atë që ne e quajmë origjina. Mendo i tyre si pika hyrëse, dosje, ose grupe për vargjet dhe përkthimet tuaja.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origjinat ju lejojnë të ndani vargjet në konteinerë me kuptim. Për shembull, mund të keni një origjinë për dokumentacionin dhe një tjetër për faqen tuaj të marketingut.
Për kontroll më të hollësishëm, mund të konfiguroni originet në nivelin e komponentit.
Për ta arritur këtë, konsideroni përdorimin e disa ofruesve TacoTranslate brenda projektit tuaj.
Ju lutemi vini re se i njëjti varg mund të marrë përkthime të ndryshme në origjina të ndryshme.
Në fund të fundit, mënyra se si ndan vargjet në origjinat varet nga ju dhe nevojat tuaja. Megjithatë, vini re se pasja e shumë vargjeve brenda një origjine mund të rrisë kohën e ngarkimit.
Trajtimi i variablave
Gjithmonë duhet të përdorni variabla për përmbajtje dinamike, si emrat e përdoruesve, datat, adresat e email-it, dhe më shumë.
Variablat në vargje deklarohen duke përdorur kllapa të dyfishta, si {{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}});
}
Menaxhimi i përmbajtjes së HTML-it
Në mënyrë të parazgjedhur, komponenti Translate
mbështet dhe paraqet përmbajtje HTML. Megjithatë, ju mund të shmangni këtë sjellje duke vendosur useDangerouslySetInnerHTML
në false
.
Çaktivizimi i renderimit HTML rekomandohet fuqishëm kur përkthen përmbajtje të pa besueshme, si përmbajtjet e krijuara nga përdoruesit.
Të gjitha rezultatet gjithmonë pastrohen me sanitize-html para se të shfaqen.
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}
/>
);
}
Shembulli i mësipërm do të shfaqet si tekst i thjeshtë.