Nyaraka: Mbinu Bora – TacoTranslate

Mbinu bora

Swahili

Weka URL katika vigezo

Wakati wa kutafsiri mistari yenye URL au data zinazofanana, ni desturi nzuri kuweka URL hizi ndani ya vigezo kisha ukazitaja ndani ya templates zako.

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

Wakati unapotafsiri maandishi ya vipengele vinavyoshirikiana kama vile vifungo, ni muhimu kujumuisha lebo za ARIA ili kuhakikisha ufikiaji. Lebo za ARIA husaidia wasomaji wa skrini kutoa taarifa za maelezo kuhusu kazi ya kipengee hicho.

Kwa mfano, ikiwa una kitufe kinachowezesha watumiaji kunakili maandishi kutoka kwenye kipengee cha msimbo, unaweza kutumia sifa ya aria-label kutoa maelezo wazi:

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

Kitu fulani kuhusu hili kinahisi kuwa meta sana.

Safu ya asili za ulimwengu na asili nyingi za vipengele

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

Wakati unafanya kazi na programu kubwa zaidi, ni muhimu kugawanya kamba na tafsiri katika asili ndogo zaidi nyingi. Njia hii husaidia kupunguza ukubwa wa kifurushi na muda wa uhamishaji, kuhakikisha uhamasishaji bora na unaoweza kupanuka.

Ingawa hili ni rahisi wakati wa kuwasilisha upande wa mteja tu, kusimamia asili kwa haraka kunakuwa changamoto wakati wa kupata tafsiri kwa ajili ya uwasilishaji wa upande wa seva. Hata hivyo, unaweza kuendesha kusimamia asili kwa kutumia safu ya mteja wa TacoTranslate origins.

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

Kushughulikia makosa na kutatua shida

Mbinu bora

Tumia lebo za ARIA

Safu ya asili za ulimwengu na asili nyingi za vipengele