Nyaraka: Mazoea bora – TacoTranslate

Mbinu bora

Swahili

Weka anwani za URL katika vigezo

Unapotafsiri mistari ya maandishi (strings) yenye URL au data zinazofanana, ni desturi nzuri kuweka URL hizi ndani ya vigezo (variables) kisha kuzirejelea katika templeti zako.

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

Tumia lebo za ARIA

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

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

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

Kitu kuhusu hili kinahisi kuwa meta sana.

Msururu wa asili za kimataifa na asili nyingi za komponenti

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

Unapofanya kazi na programu kubwa, ni vyema kugawanya strings na tafsiri katika origins ndogo nyingi. Njia hii husaidia kupunguza ukubwa wa bundle na nyakati za uhamishaji, ikihakikisha lokalizesheni yenye ufanisi na inayoweza kupanuka.

Ingawa hili ni rahisi wakati wa ku-render upande wa client pekee, kusimamia origins kunakuwa haraka kuwa ngumu wakati unapotafuta tafsiri kwa ajili ya server-side rendering. Hata hivyo, unaweza ku-automatisha usimamizi wa origins kwa kutumia array ya mteja wa TacoTranslate origins.

Angalia mfano huu, ambapo tumegawanya components 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});
}

Angalia mifano yetu ya uonyeshaji upande wa seva kwa maelezo zaidi kuhusu getTacoTranslateStaticProps.

Kushughulikia makosa na kutatua mende