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

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

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 استعمال کرتے وقت کام کرتا ہے۔

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

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

عالمی ماخذوں کی صف اور متعدد کمپوننٹس کے ماخذ