Përdorimi i TacoTranslate
Përkthimi i vargjeve
Aktualisht ekzistojnë tre mënyra për të përkthyer vargjet: Komponenti Translate
, hook-u useTranslation
ose utiliteti translateEntries
.
Përdorimi i komponentit Translate
.
Shfaq përkthime brenda një elementi span
, dhe mbështet paraqitjen e HTML-së.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Ju 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 tekst të thjeshtë. I dobishëm, 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 utilitetit translateEntries
.
Shkruani përkthime në anën e serverit. Jepni fuqi të madhe imazheve tuaja 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 stringjet 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ë janë përgjithësisht më pak cilësore krahasuar me përkthimet tona me AI, ato ofrojnë një përgjigje fillestare të shpejtë.
Njëkohësisht, ne fillojmë një detyrë përkthimi asinkrone për të gjeneruar një përkthim me cilësi të lartë, të avancuar me AI për vargun tuaj. Pasi përkthimi me AI të jetë gati, ai do të zëvendësojë përkthimin makinerik 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. Mendoni për to si pika hyrjeje, 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ë ndahen vargjet në kuti kuptimplote. 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 origins në nivelin e komponentit.
Për ta arritur këtë, konsideroni përdorimin e disa ofruesve TacoTranslate brenda projektit tuaj.
Ju lutemi vini re që e njëjta varg mund të marrë përkthime të ndryshme në origjina të ndryshme.
Në fund të fundit, mënyra se si ndan vargjet në origjina varet nga ju dhe nevojat tuaja. Megjithatë, vini re se pasur shumë vargje brenda një origjine mund të rrisë kohën e ngarkimit.
Menaxhimi i variablave
Ju duhet gjithmonë 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 HTML
Në mënyrë të paracaktuar, komponenti Translate
mbështet dhe renderizon përmbajtje HTML. Megjithatë, ju mund të përjashtoheni nga kjo sjellje duke vendosur useDangerouslySetInnerHTML
në false
.
Çaktivizimi i renderimit HTML rekomandohet fuqishëm kur përktheni përmbajtje të pa besueshme, si përmbajtja e gjeneruar nga përdoruesit.
Të gjitha rezultatet pastrohen gjithmonë 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ë.