دستاویزات: بہترین طریقۂ کار

بہترین طریقہ کار

Urdu

URLs کو متغیرات میں رکھیں

جب ایسی سٹرنگز کا ترجمہ کیا جا رہا ہو جن میں 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 استعمال کیا جائے۔

بڑی ایپلیکیشنز کے ساتھ کام کرتے وقت، یہ فائدہ مند ہوتا ہے کہ سٹرنگز اور تراجم کو متعدد، چھوٹے origins میں تقسیم کیا جائے۔ یہ طریقہ بنڈل سائز اور ٹرانسفر وقت کو کم کرنے میں مدد دیتا ہے، جس سے موثر اور قابلِ توسیع لوکلائزیشن یقینی بنتی ہے۔

جب یہ عمل صرف کلائنٹ سائیڈ پر رینڈرنگ کے وقت کیا جائے تو یہ سیدھا سادہ ہوتا ہے، مگر جب سرور سائیڈ رینڈرنگ کے لیے تراجم حاصل کیے جا رہے ہوں تو origins کا انتظام تیزی سے پیچیدہ ہو جاتا ہے۔ تاہم، آپ TacoTranslate کلائنٹ origins array کا استعمال کرکے 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 لیبلز استعمال کریں

عالمی ماخذوں کی صف اور متعدد اجزاء کے ماخذ