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

غوره کړنلارې

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

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