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

غوره کړنلارې

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 کارولو پر مهال کار کوي.

کله چې له لویو غوښتنلیکونو سره کار کوئ، ښه ده چې تارونه او ژباړې په څو کوچنیو origins وویشئ. دا طریقه د بندل اندازه او د لیږد وختونه کموي، چې د مؤثر او پراختیایي محلي کولو تضمین کوي.

دا کار په ساده ډول ترسره کیږي کله چې یوازې په ښونکي (client) اړخ کې ډک کړئ، خو کله چې د سرور اړخ لپاره ژباړې ترلاسه کوئ، د origins مدیریت ژر پېچلی کیږي. په هرصورت، تاسو کولی شئ د TacoTranslate کلاینت origins لړۍ کارولو سره د 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 لیبلونه وکاروئ

د ګلوبل اصلي سرچینې ارایه او د څو برخو سرچینې