Nyaraka: Miongozo Bora – TacoTranslate

Mazoea bora

Swahili

Weka anwani za URL katika vigezo

Wakati wa kutafsiri strings zinazohusisha URL au data zinazofanana, ni desturi nzuri kuweka URL hizo ndani ya vigezo kisha kuzirejelea 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 vya mwingiliano 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 kwenye sehemu ya msimbo, unaweza kutumia sifa aria-label kutoa maelezo wazi:

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

Kuna kitu kuhusu hili kinahisi kuwa meta sana.

Safu ya vyanzo vya kimataifa na vyanzo vingi vya komponenti

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

Unapofanya kazi na programu kubwa, ni vyema kugawanya vifungu vya maandishi na tafsiri katika vyanzo vingi, vidogo. Njia hii husaidia kupunguza ukubwa wa vifurushi na muda wa uhamishaji, na hivyo kuhakikisha uboreshaji wa utafsiri unaofaa na unaoweza kupanuka.

Ingawa hili ni rahisi wakati wa kuonyesha tu upande wa mteja, kusimamia vyanzo haraka kunakuwa ngumu wakati wa kupata tafsiri kwa ajili ya kuonyesha upande wa seva. Hata hivyo, unaweza kuendesha otomatiki usimamizi wa vyanzo kwa kutumia safu ya mteja wa TacoTranslate origins.

Angalia mfano huu, ambapo tumewatenganisha vipengele 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 uonyesho upande wa seva kwa maelezo zaidi kuhusu getTacoTranslateStaticProps.

Kushughulikia makosa na utatuzi wa mende