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 ప్రాజెక్టుల్లో మేము మూలాలు అనే వాటిని కలిగి ఉంటాము. వాటిని మీ స్ట్రింగ్స్ మరియు అనువాదాల కోసం ప్రవేశ పాయింట్లు, ఫోల్డర్లు లేదా సమూహాలుగా భావించండి.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}Origins మీకు స్ట్రింగ్‌లను అర్థవంతమైన కంటెయినర్లుగా విడగొట్టేలా చేస్తాయి. ఉదాహరణకు, డాక్యుమెంటేషన్‌కి ఒక origin మరియు మీ మార్కెటింగ్ పేజీకి మరో origin ఉండవచ్చు.
ఇంకా సూక్ష్మంగా నియంత్రించాలనుకుంటే, మీరు కాంపోనెంట్ స్థాయిలో 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}
/>
);
}పై ఉదాహరణ సాధారణ పాఠ్యంగా ప్రదర్శించబడుతుంది.