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

غوره کړنلارې

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

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