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 ارې کارولو سره د سرچینو مدیریت اتومات کړئ.

دا مثال په پام کې ونیسئ، چېرې چې موږ خپل برخې او مخونه په جلا فایلونو کې وېشلي دي.

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 په اړه کتلای شئ د سرور-خوا ښودنې مثالونه.

د تېروتنې اداره کول او خطا موندل