مستندات: غوره کړنلارې

غوره کړنلارې

Pashto

URLونه په متغیرونو کې واچوئ

کله چې داسې متنونه ژباړئ چې URLونه یا ورته معلومات پکې شامل وي، ښه عمل دا دی چې دغه URLونه په متغیرونو کې واچوئ او بیا یې په خپلو ټیمپلیټونو کې حواله کړئ.

<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 لیبلونه وکاروئ

د نړیوالو سرچینو لړلیک او د څو کمپوننټونو سرچینې