TacoTranslate ఉపయోగించడం
స్ట్రింగ్లను అనువదించడం
ప్రస్తుతం స్ట్రింగ్లను అనువదించడానికి మూడు మార్గాలు ఉన్నాయి: Translate
కంపోనెంట్, useTranslation
హుక్, లేదా translateEntries
యుటిలిటీ.
Translate
కాంపోనెంట్ను ఉపయోగించడం.
అనువాదాలను span
ఎలిమెంట్లో చూపిస్తుంది, మరియు HTML రెండరింగ్ను మద్దతు చేస్తుంది.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
ఉదాహరణకు, మీరు కంపోనెంట్లో as="p"
ఉపయోగించి ఎలిమెంట్ రకాన్ని మార్చవచ్చు.
useTranslation
హుక్ను ఉపయోగించడం.
అనువాదాలను సాధారణ స్ట్రింగ్గా తిరిగి ఇస్తుంది. ఉదాహరణకు, 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>
);
}
translateEntries
యుటిలిటీని ఉపయోగించడం.
స్ట్రింగులను సర్వర్-సైడ్లో అనువదించండి. మీ 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)
};
}
స్ట్రింగ్లు ఎలా అనువదించబడతాయి
స్ట్రింగ్లు మా సర్వర్లకు చేరినప్పుడు, మేము అవి ముందుగా ధృవీకరించి భద్రపరచి, వెంటనే ఒక యంత్ర అనువాదాన్ని అందిస్తాము. యంత్ర అనువాదాలు సాధారణంగా మా AI అనువాదాలతో పోలిస్తే నాణ్యతలో తక్కువగా ఉంటాయి, అయినప్పటికీ అవి వేగవంతమైన ప్రారంభ స్పందనను అందిస్తాయి.
అదే సమయంలో, మేము మీ స్ట్రింగ్కు ఉన్నత-నాణ్యత, అత్యాధునిక AI అనువాదాన్ని సృష్టించడానికి అసింక్రనస్ అనువాద పనిని ప్రారంభిస్తాము. AI అనువాదం సిద్ధమైన వెంటనే అది మెషిన్ అనువాదాన్ని మార్చేసి మీరు మీ స్ట్రింగ్లకు అనువాదాలు అడిగినప్పుడు పంపబడుతుంది.
మీరు ఒక స్ట్రింగ్ను చేతితో అనువదించినట్లయితే, ఆ అనువాదాలకు ప్రాధాన్యత ఉండి అవే తిరిగి అందిస్తారు.
మూలాలను ఉపయోగించడం
TacoTranslate ప్రాజెక్టుల్లో మనం origins అని పిలిచే అంశాలు ఉంటాయి. అవి మీ స్ట్రింగ్స్ మరియు అనువాదాల కోసం ప్రవేశ బిందువులు, ఫోల్డర్లు లేదా గుంపులుగా భావించండి.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
ఒరిజిన్స్ మీకు స్ట్రింగ్లను అర్థవంతమైన కంటైనర్లుగా వేరుగా ఉంచుకునేలా అనుమతిస్తాయి. ఉదాహరణకు, డాక్యుమెంటేషన్ కోసం ఒక ఒరిజిన్ ఉండవచ్చు మరియు మీ మార్కెటింగ్ పేజీ కోసం మరోటి.
మరింత సూక్ష్మ నియంత్రణ కోసం, మీరు originsను కంపోనెంట్ స్థాయిలో ఏర్పాటు చేయవచ్చు.
దీన్ని సాధించడానికి, బహుళ TacoTranslate ప్రొవైడర్లను ఉపయోగించడం మీ ప్రాజెక్ట్లో పరిగణించండి.
దయచేసి గమనించండి: అదే స్ట్రింగ్ వివిధ మూలాల్లో వివిధ అనువాదాలు పొందవచ్చు.
చివరికి, స్ట్రింగ్లను origins గా మీరు ఎలా వేరుచేసుకుంటారో అది మీపై మరియు మీ అవసరాలపై ఆధారపడి ఉంటుంది. అయితే, ఒకే origin లో చాలా స్ట్రింగ్లు ఉంటే లోడ్ సమయాలు పెరుగవచ్చు అనే విషయాన్ని గమనించండి.
వేరియబుల్లను నిర్వహించడం
వినియోగదారుల పేర్లు, తేదీలు, ఇమెయిల్ చిరునామాలు మరియు మరిన్ని వంటి డైనమిక్ కంటెంట్ కోసం మీరు ఎప్పుడూ వేరియబుల్లను ఉపయోగించాలి.
స్ట్రింగుల్లో వేరియబుల్స్ను డబుల్ బ్రాకెట్లతో ప్రకటిస్తారు, ఉదాహరణకు {{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 కంటెంట్ నిర్వహించడం
డిఫాల్ట్గా, Translate
కంపోనెంట్ HTML కంటెంట్కు మద్దతు ఇస్తుంది మరియు దాన్ని ప్రదర్శిస్తుంది. అయితే, మీరు ఈ ప్రవర్తన నుండి తప్పుకోవడానికి useDangerouslySetInnerHTML
ను false
గా సెట్ చేయవచ్చు.
యూజర్-జనరేటెడ్ కంటెంట్ వంటి నమ్మకంలేని కంటెంట్ను అనువదిస్తున్నప్పుడు HTML రెండరింగ్ను నిలిపివేయాలని బలంగా సిఫార్సు చేయబడుతుంది.
ప్రదర్శించకముందు అన్ని అవుట్పుట్లు ఎల్లప్పుడూ sanitize-htmlతో శుద్ధి చేయబడతాయి.
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}
/>
);
}
పైన ఉన్న ఉదాహరణ సాధారణ పాఠ్యంగా ప్రదర్శించబడుతుంది.