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

بہترین طریقے

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"
/>

اس میں کچھ چیز بہت میٹا محسوس ہوتی ہے۔

عالمی origins آرے اور متعدد component origins

یہ پیٹرن صرف Next.js Pages Router استعمال کرتے وقت کام کرتا ہے۔

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

جبکہ یہ صرف کلائنٹ سائیڈ پر رینڈرنگ کے دوران آسان ہوتا ہے، origins کا انتظام سرور سائیڈ رینڈرنگ کے لیے تراجم حاصل کرتے وقت جلد ہی پیچیدہ ہو جاتا ہے۔ تاہم، آپ TacoTranslate کلائنٹ origins ارے کا استعمال کر کے origin مینجمنٹ کو خودکار بنا سکتے ہیں۔

اس مثال پر غور کریں، جہاں ہم نے اپنے components اور صفحات کو الگ فائلوں میں تقسیم کیا ہے۔

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

عالمی origins آرے اور متعدد component origins