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

غوره کړنلارې

Pashto

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

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

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