Nyaraka: Mazoea bora – TacoTranslate

Miongozo bora

Swahili

Weka anwani za URL katika vigezo

Unapotafsiri nyuzi za maandishi zinazojumuisha URL au data zinazofanana, ni desturi nzuri kuweka URL hizo ndani ya vigezo kisha kuzirejelea katika templeti zako.

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

Tumia lebo za ARIA

Unapotafsiri maandishi ya vipengele vinavyoweza kuingiliana kama vitufe, ni muhimu kujumuisha lebo za ARIA ili kuhakikisha upatikanaji. Lebo za ARIA husaidia wasomaji wa skrini kutoa maelezo yanayofafanua kazi ya kipengele.

Kwa mfano, ikiwa una kitufe kinachowaruhusu watumiaji kunakili maandishi kutoka kwenye bloku ya msimbo, unaweza kutumia kiambatisho cha aria-label kutoa maelezo wazi:

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

Kuna jambo kuhusu hili linalohisi kuwa meta sana.

Safu ya vyanzo vya kimataifa na vyanzo vingi vya vipengele

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

Unapofanya kazi na programu kubwa, ni vyema kugawanya mistari ya maandishi na tafsiri katika vyanzo vingi vidogo. Njia hii husaidia kupunguza ukubwa wa vifurushi na muda wa uhamisho, na hivyo kuhakikisha lokalizishaji wenye ufanisi na unaoweza kupanuka.

Ingawa hili ni rahisi wakati wa kuunda muonekano upande wa mteja pekee, kusimamia vyanzo kunaweza haraka kuwa ngumu wakati wa kupata tafsiri kwa ajili ya uundaji upande wa seva. Hata hivyo, unaweza kuendesha kiotomatiki usimamizi wa vyanzo kwa kutumia safu origins ya mteja wa TacoTranslate.

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

Kushughulikia makosa na kutatua mende