డాక్యుమెంటేషన్: ఉత్తమ ఆచారాలు

చిన్న కోపాలు

Telugu

URLs ని వేరియబుల్స్‌లో ఉంచండి

URLs లేదా ఇలాంటి డేటా ఉన్న స్ట్రింగ్స్‌ని అనువదిస్తున్నప్పుడు, వీటిని వేరియబుల్స్‌లో ఉంచి ఆ తర్వాత వాటిని మీ టెంప్లేట్స్‌లో రిఫర్ చేయడం ఒక మంచి ఆచరణగా పరిగణించబడుతుంది.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

ఇంటి బటన్ల వంటి ఇంటరాక్టివ్ ఎలిమెంట్ల టెక్స్ట్‌ను అనువదించినప్పుడు, యాక్సెసిబిలిటీని నిర్ధారించేందుకు ARIA లేబుళ్లు చేర్చడం ముఖ్యము. ARIA లేబుళ్లు స్క్రీన్ రీడర్లకు ఆ ఎలిమెంట్ యొక్క ఫంక్షన్ గురించి వివరణాత్మక సమాచారం అందించడంలో సహాయపడతాయి.

ఉదాహరణకు, మీరు ఒక కోడ్ బ్లాక్ నుండి టెక్స్ట్‌ను కాపీ చేసేవారు కోసం బటన్ని కలిగి ఉంటే, మీరు స్పష్టమైన వివరణ ఇవ్వడానికి aria-label గుణాన్ని ఉపయోగించవచ్చు:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

దీనిలో ఏదో ఒకటి చాలా మెటా అనిపిస్తోంది.

గ్లోబల్ మూలాలు సరస మరియు బహుళ భాగం మూలాలు

ఈ నమూనా Next.js Pages Router ఉపయోగిస్తున్నప్పుడు మాత్రమే పనిచేస్తుంది.

పెద్ద అప్లికేషన్లతో పని చేస్తున్నప్పుడు, స్ట్రింగ్స్ మరియు అనువాదాలను అనేక చిన్న మూలాలుగా విభజించడం ప్రయోజనకరం. ఈ విధానం బండిల్ పరిమాణాలను మరియు ట్రాన్స్ఫర్ సమయాలను తగ్గించడంలో సహాయపడుతుంది, దీని ద్వారా సమర్థవంతమైన మరియు స్కేలబుల్ లోకలైజేషన్ నిర్ధారించబడుతుంది.

క్లయింట్ సైడ్‌లో మాత్రమే రండరింగ్ చేస్తున్నప్పుడు ఇది సులభంగా కనిపించినప్పటికీ, సర్వర్-సైడ్ రండరింగ్ కోసం అనువాదాలు పొందేటప్పుడు మూలాలను నిర్వహించడం తక్షణమే సంక్లిష్టమవుతుంది. అయితే, TacoTranslate క్లయింట్ origins ఆరేను ఉపయోగించి మూల నిర్వహణను ఆటోమేట్ చేయవచ్చు.

మేము మా భాగాలు మరియు పేజీలను వేరే వేరే ఫైళ్లలో విడగొట్టి తీసుకున్న ఈ ఉదాహరణను పరిగణించండి.

components/pricing-table.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import tacoTranslate from '../tacotranslate-client';

// Set an origin name for this component
const origin = 'components/pricing-table';

// Push the origin into the origins array as this file is imported
tacoTranslate.origins.push(origin);

export default function PricingTable() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing table" />
			// ...
		</TacoTranslate>
	);
}

pages/pricing.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
import PricingTable from '../components/pricing-table';

const origin = 'pages/pricing';
tacoTranslateClient.origins.push(origin);

export default function PricingPage() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing page" />
			<PricingTable />
		</TacoTranslate>
	);
}

// We will now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

మరిన్ని సమాచారం కోసం మా సర్వర్-సైడ్ రెండరింగ్ ఉదాహరణలను చూడండి getTacoTranslateStaticProps.

లోపాలను నిర్వహించడం మరియు డీబగ్ చేయడం

చిన్న కోపాలు

ARIA లేబుల్స్ ఉపయోగించండి

గ్లోబల్ మూలాలు సరస మరియు బహుళ భాగం మూలాలు