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

بہترین طریقے

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 استعمال کرنے پر ہی کام کرتا ہے۔

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

جب صرف client side پر rendering ہو تو یہ آسان ہے، لیکن server-side rendering کے لیے translations حاصل کرتے وقت origins کا انتظام تیزی سے پیچیدہ ہو جاتا ہے۔ تاہم، آپ TacoTranslate client origins array کو استعمال کر کے origin management کو خودکار بنا سکتے ہیں۔

اس مثال پر غور کریں، جہاں ہم نے اپنے 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 لیبلز استعمال کریں

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