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 mjeti translateEntries
.
Përdorimi i komponentit Translate
.
Shfaq përkthimet brenda një elementi span
, dhe mbështet shfaqjen 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 një varg të thjeshtë. I dobishëm, për shembull, në meta
etiketa.
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
.
Përkthe vargjet në anën e serverit. Fuqizo 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 stringjet arrijnë në serverat tanë, ne së pari i vërtetojmë dhe i ruajmë, pastaj menjëherë kthejmë një përkthim me makinë. Megjithëse përkthimet me makinë zakonisht kanë cilësi më të ulët krahasuar me përkthimet tona me AI, ato ofrojnë një përgjigje të shpejtë fillestare.
Njëkohësisht, ne nisim një punë përkthimi asinkrone për të gjeneruar një përkthim të cilësisë së lartë, të avancuar me AI për stringun 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 stringjet tuaja.
Nëse keni përkthyer manualisht një varg, ato përkthime kanë përparësi dhe rikthehen në vend të tyre.
Përdorimi i origjinave
Projektet TacoTranslate përmbajnë atë që ne e quajmë origjina. Mendoni për to 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ë ndanë vargjet në kontejnerë 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ë detajuar, 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 lutem vini re që e njëjta varg tekstual mund të marrë përkthime të ndryshme në origjinat e ndryshme.
Në fund të fundit, mënyra se si ndan vargjet në origjina 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ërmbajtjen 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ë parazgjedhjeje, komponenti Translate
mbështet dhe rendit përmbajtjen HTML. Megjithatë, mund të hiqni dorë nga ky sjellje duke vendosur useDangerouslySetInnerHTML
në false
.
Çaktivizimi i renderimit HTML rekomandohet fuqimisht kur përktheni përmbajtje të pa besueshme, si për shembull 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ë.