Nyaraka: Mazoea bora – TacoTranslate

Miongozo bora

Swahili

Weka URL kwenye vigezo

Unapotafsiri mistari ya maandishi yenye URL au data inayofanana, ni desturi nzuri kuweka URL hizi ndani ya vigezo (variables) na kisha kuzirejelea ndani ya templates zako.

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

Unapotafsiri maandishi ya vipengele vya mwingiliano kama vitufe, ni muhimu kujumuisha lebo za ARIA ili kuhakikisha upatikanaji. Lebo za ARIA husaidia programu za kusoma skrini kutoa maelezo yanayoelezea kazi ya kipengee.

Kwa mfano, ikiwa una kitufe kinachowawezesha watumiaji kunakili maandishi kutoka kwenye kifungu cha msimbo, unaweza kutumia atributi 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 vyanzo vya kimataifa na vyanzo vingi vya vipengee

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

Unapofanya kazi na programu kubwa, ni vyema kugawanya mistari na tafsiri katika origins nyingi, ndogo. Njia hii husaidia kupunguza ukubwa wa bundle na muda wa uhamisho, ikihakikisha utafsiri unaofanya kazi kwa ufanisi na unaoweza kupanuka.

Ingawa hili ni rahisi wakati unatengeneza upande wa mteja pekee, kusimamia origins kunakuwa ngumu haraka unapochukua tafsiri kwa ajili ya utayarishaji upande wa seva. Hata hivyo, unaweza kuendesha kiotomatiki usimamizi wa origins kwa kutumia array ya mteja wa TacoTranslate origins.

Tazama mfano huu, ambapo tumetenganisha vijenzi 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 zetu za server-side rendering kwa maelezo zaidi kuhusu getTacoTranslateStaticProps.

Kushughulikia makosa na utatuzi wa mende

Miongozo bora

Tumia lebo za ARIA

Safu ya vyanzo vya kimataifa na vyanzo vingi vya vipengee