Dukumentiga: Hababka ugu Wanaagsan

Hab-dhaqannada ugu wanaagsan

Somali

Ku rid URL-yada isbeddelada

Marka la turjumayo xarfo ay ku jiraan URLs ama xog la mid ah, waxaa loo tixgeliyaa dhaqan wanaagsan in URLs-kaas lagu dhex geliyo variables kadibna lagu tixraaco gudaha templates-kaaga.

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

Marka la turjumayo qoraalka walxaha isdhexgalka sida badhamada, waxaa muhiim ah in la isticmaalo calaamadaha ARIA si loo hubiyo helitaanka. Calaamadaha ARIA waxay ka caawiyaan akhristayaasha shaashadda inay bixiyaan macluumaad faahfaahsan oo ku saabsan shaqada walxaha.

Tusaale ahaan, haddii aad leedahay badhamo u oggolaanaya isticmaaleyaasha inay nuqul ka sameeyaan qoraalka ku jira block code, waxaad isticmaali kartaa astaanta aria-label si aad u bixiso sharraxaad cad:

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

Wax ku saabsan tan waxay leedahay dareen aad u meta ah.

Xarunta asal ahaan caalami ah iyo asalyo badan oo qaybo ah

Qaab-dhiskan wuxuu shaqeeyaa kaliya marka la isticmaalo Next.js Pages Router.

Marka lala shaqeynayo barnaamijyo waaweyn, waxaa wanaagsan in la kala qaybiyo xarfo iyo turjumaadaha ilaha badan ee yaryar. Habkani wuxuu ka caawiyaa yaraynta cabbirka xirmooyinka iyo wakhtiyada wareejinta, isagoo xaqiijinaya turjumaad wax ku ool ah oo la ballaarin karo.

In kasta oo tani ay fudud tahay marka kaliya dhinaca macaamiisha la soo bandhigo, maaraynta ilaha waxay si dhakhso leh u noqonaysaa mid qallafsan marka turjumaadaha laga soo qaadayo dhinaca server-ka. Si kastaba ha ahaatee, waxaad si otomaatig ah u maamuli kartaa ilaha adigoo isticmaalaya TacoTranslate client origins array.

Tusaalahan ka fiirso, halkaasoo aan ka kala saarnay qaybaha iyo bogagga faylal kala duwan.

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

Fiiri tusaalooyinka soo bandhigida server-ka dhinaca macluumaad dheeraad ah oo ku saabsan getTacoTranslateStaticProps.

Maareynta khaladaadka iyo baaritaanka dhibaatada

Hab-dhaqannada ugu wanaagsan

Isticmaal summadaha ARIA

Xarunta asal ahaan caalami ah iyo asalyo badan oo qaybo ah