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

غوره کړنلارې

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

د نړیوالو سرچینو آرایه او د څو برخو سرچینې