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

غوره کړنلارې

Pashto

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

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