Nyaraka: Mbinu Bora – TacoTranslate

Mbinu bora

Swahili

Weka URL katika vigezo

Wakati wa kutafsiri mistari yenye URL au data zinazofanana, ni desturi nzuri kuweka URL hizi ndani ya vigezo (variables) kisha kuvitaja ndani ya templates zako.

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

Wakati wa kutafsiri maandishi ya vitu vinavyoshirikiana kama vile vitufe, ni muhimu kujumuisha lebo za ARIA ili kuhakikisha upatikanaji. Lebo za ARIA husaidia wasomaji wa skrini kutoa taarifa za maelezo kuhusu kazi ya kipengele.

Kwa mfano, ikiwa una kitufe kinachowezesha watumiaji kunakili maandishi kutoka kwenye kipande cha msimbo, unaweza kutumia sifa ya aria-label kutoa maelezo wazi:

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

Kuna kitu kuhusu hili kinahisi kuwa meta sana.

Mfuatano wa asili za ulimwengu na asili nyingi za vipengele

Mfumo huu hufanya kazi tu wakati wa kutumia Next.js Pages Router.

Wakati unafanya kazi na programu kubwa zaidi, ni vyema kugawanya vifungu na tafsiri katika asili mbalimbali ndogo. Njia hii husaidia kupunguza ukubwa wa mifuko na nyakati za uhamishaji, kuhakikisha uanzishaji bora na unaoweza kupanuka.

Wakati hii ni rahisi pale unapochora upande wa mteja tu, kusimamia asili hubadilika kuwa ngumu haraka unapopakua tafsiri kwa ajili ya kuchora upande wa seva. Hata hivyo, unaweza kuendesha moja kwa moja usimamizi wa asili kwa kutumia safu ya mteja wa TacoTranslate origins.

Tazama mfano huu, ambapo tumezagua vipengele na kurasa zetu katika faili tofauti.

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

Tazama mifano ya uonyesho upande wa seva kwa maelezo zaidi kuhusu getTacoTranslateStaticProps.

Kushughulikia makosa na utatuzi wa matatizo

Mbinu bora

Tumia lebo za ARIA

Mfuatano wa asili za ulimwengu na asili nyingi za vipengele