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

بہترین طریقے

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

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