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

غوره کړنلارې

Pashto

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

کله چې هغه متنونه ژباړئ چې پکې 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 لیبلونه وکاروئ

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