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

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

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 اور pages کو الگ فائلوں میں تقسیم کیا ہے۔

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 لیبلز استعمال کریں

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