TacoTranslate
/
دستاویزاتقیمتیں
 
  1. تعارف
  2. شروع کریں
  3. تنصیب اور ترتیب
  4. TacoTranslate کا استعمال
  5. سرور سائیڈ رینڈرنگ
  6. متقدم استعمال
  7. بہترین طریقۂ کار
  8. غلطیوں کا انتظام اور ڈیبگنگ
  9. مدد یافتہ زبانیں

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

URLs کو متغیرات میں رکھیں

جب ایسے عبارتوں کا ترجمہ کیا جائے جن میں URLs یا اسی طرح کا ڈیٹا شامل ہو، تو یہ بہترین عمل سمجھا جاتا ہے کہ ان URLs کو متغیرات میں رکھا جائے اور پھر اپنے ٹیمپلیٹس میں ان کا حوالہ دیا جائے۔

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

ARIA لیبلز استعمال کریں

جب آپ بٹن جیسے تفاعلی عناصر کے متن کا ترجمہ کریں تو رسائی کو یقینی بنانے کے لیے ARIA لیبلز شامل کرنا اہم ہے۔ ARIA لیبلز اسکرین ریڈرز کو عنصر کے کام کے بارے میں وضاحتی معلومات فراہم کرنے میں مدد دیتے ہیں۔

مثال کے طور پر، اگر آپ کے پاس ایسا بٹن ہے جو صارفین کو کوڈ بلاک سے متن نقل کرنے دیتا ہے، تو آپ aria-label اٹریبیوٹ استعمال کر کے ایک واضح وضاحت فراہم کر سکتے ہیں:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

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

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

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

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

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

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

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.

غلطیوں کا انتظام اور ڈیبگنگ

ایک مصنوعہ Nattskiftet سےناروے میں بنایا گیا