Dukumentiga: Dhaqamada ugu Wanaagsan

Dhaqamada ugu wanaagsan

Somali

Ku dheji URL-yada beddelayaasha

Marka la turjumayo xarfo ay ku jiraan URL-yo ama xog la mid ah, waxaa loo arkaa dhaqan wanaagsan in URL-yadan lagu dhex dhigo isbeddellada (variables) ka dibna laga isticmaalo template-yadaada.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

Isticmaal summadaha ARIA

Marka la turjumayo qoraalka walxaha is-dhexgalka ah sida badhamada, waxaa muhiim ah in lagu daro calaamadaha ARIA si loo xaqiijiyo helitaanka. Calaamadaha ARIA waxay ka caawiyaan akhristayaasha shaashadda inay bixiyaan macluumaad faahfaahsan oo ku saabsan shaqada walxaha.

Tusaale ahaan, haddii aad haysato badhan u oggolaanaya isticmaaleyaasha inay nuqul ka sameeyaan qoraal ku jira qayb koodh ah, waxaad isticmaali kartaa sifooyinka aria-label si aad u bixiso sharaxaad cad:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

Wax qasab ah oo arrintan ku saabsan waxay u muuqataa mid aad u meta ah.

Xariijinta asalka caalamiga ah iyo ilo badan oo qaybaha ah

Qaabkani wuxuu shaqeeyaa kaliya marka la isticmaalayo Next.js Pages Router.

Marka la shaqeynayo codsiyo waaweyn, waxaa faa'iido leh in la kala qeybiyo xarfo iyo turjumaado asalyo badan oo yaryar. Habkani wuxuu ka caawiyaa in la yareeyo cabbirka xirmooyinka iyo waqtiga gudbinta, isagoo hubinaya turjumaad hufan oo la ballaarin karo.

Inkastoo tani ay si sahlan u dhacdo marka keliya dhinaca macaamiisha laga soo bandhigayo, maaraynta asalada waxay si degdeg ah u adkaan kartaa marka la soo qaadanayo turjumaadaha server-side rendering. Si kastaba ha ahaatee, waxaad otomaatig ka dhigi kartaa maaraynta asalada adoo adeegsanaya TacoTranslate client origins array.

Tusaalahan ka fiirso, halkaasoo aan qaybaha iyo bogaggayaga u kala qaybinay faylal gaar ah.

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});
}

Eeg tusaalooyinka server-side rendering wixii macluumaad dheeraad ah oo ku saabsan getTacoTranslateStaticProps.

Maareynta khaladaadka iyo sixitaanka cilladaha