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

بہترین طریقے

Urdu

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

جب ایسی سٹرنگز کا ترجمہ کریں جن میں URLs یا اسی طرح کے ڈیٹا شامل ہوں، تو یہ ایک اچھا عمل سمجھا جاتا ہے کہ ان URLs کو متغیرات (variables) کے اندر رکھا جائے اور پھر اپنے ٹیمپلیٹس میں ان کا حوالہ دیا جائے۔

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

ARIA لیبلز استعمال کریں

جب آپ بٹن جیسے انٹرایکٹو عناصر کے متن کا ترجمہ کر رہے ہوں، تو قابل رسائی کو یقینی بنانے کے لیے 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 کے بارے میں ہیں۔

خرابی کا انتظام اور غلطی دور کرنا