Nyaraka: Mazoea Bora – TacoTranslate

Mbinu bora

Swahili

Weka anwani za URL katika vigezo

Unapotafsiri vifungu vinavyojumuisha URL au data inayofanana, ni desturi nzuri kuweka URL hizo ndani ya vigezo kisha kuzirejea ndani ya kiolezo chako.

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

Tumia lebo za ARIA

Unapotafsiri maandishi ya vipengele vinavyoshirikisha watumiaji kama vitufe, ni muhimu kujumuisha lebo za ARIA ili kuhakikisha upatikanaji. Lebu za ARIA husaidia wasomaji wa skrini kutoa maelezo kuhusu kazi ya kipengee.

Kwa mfano, ikiwa una kitufe kinachowawezesha watumiaji kunakili maandishi kutoka kwenye sehemu ya 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.

Safu ya asili ya kimataifa na asili nyingi za vipengele

Mfano huu unafanya kazi tu unapotumia Next.js Pages Router.

Unapofanya kazi na programu kubwa, ni vyema kugawanya nyuzi za maandishi na tafsiri katika vyanzo vingi vidogo. Njia hii husaidia kupunguza ukubwa wa vifurushi na muda wa uhamisho, ikihakikisha lokalizishaji lenye ufanisi na uwezo wa kupanuka.

Wakati hili ni rahisi pale unapoonyesha tu upande wa mteja, kusimamia vyanzo kunaweza kuwa ngumu haraka unapopata tafsiri kwa ajili ya kuonyesha upande wa seva. Hata hivyo, unaweza kuanzisha usimamizi wa vyanzo kiotomatiki kwa kutumia mfuatano wa mteja wa TacoTranslate origins.

Angalia mfano huu, ambapo tumetenganisha vipengele vyetu na kurasa 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 yetu ya uonyeshaji upande wa seva kwa maelezo zaidi kuhusu getTacoTranslateStaticProps.

Ushughulikiaji wa makosa na utatuzi wa kasoro