Nyaraka: Mbinu Bora – TacoTranslate

Miongozo bora

Swahili

Weka anwani za URL katika vigezo

Wakati ukitafsiri mistari yenye URL au data sawa, ni desturi nzuri kuweka URL hizo ndani ya vigezo kisha kuzitumia ndani ya 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.

Safu ya vyanzo vya kimataifa na vyanzo vingi vya 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});
}

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

Ushughulikiaji na utatuzi wa makosa