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

بہترین طریقے

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

عالمی ماخذات کا آررے اور متعدد کمپونینٹ ماخذات