డాక్యుమెంటేషన్: TacoTranslate ఉపయోగించడం

TacoTranslate ఉపయోగించడం

Telugu

స్ట్రింగులను అనువదించడం

ప్రస్తుతం స్ట్రింగ్‌లను అనువదించడానికి మూడు మార్గాలు ఉన్నాయి: 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‌ని ఏర్పాటు చేయవచ్చు.

దీన్ని సాధించడానికి, మీ ప్రాజెక్టులో అనేక 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}
		/>
	);
}

పై ఉదాహరణ సాధారణ పాఠ్యంగా ప్రదర్శించబడుతుంది.

సెర్వర్-సైడ్ రెండరింగ్