Nyaraka: Mvuto bora – TacoTranslate

Mila bora

Swahili

Weka URL katika vigezo

Wakati wa kutafsiri mistari yenye URL au data zinazofanana, ni tabia nzuri kuweka URL hizi ndani ya vigezo (variables) kisha kuzirejelea ndani ya templates zako.

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

Wakati wa kutafsiri maandishi ya vipengele vya mwingiliano kama vile vifungo, ni muhimu kujumuisha lebo za ARIA ili kuhakikisha ufikikaji. Lebo za ARIA husaidia wasomaji wa skrini kutoa taarifa za kuelezea kuhusu kazi ya kipengele.

Kwa mfano, ikiwa una kitufe kinachowaruhusu watumiaji kunakili maandishi kutoka kwenye sehemu ya nambari, unaweza kutumia sifa ya aria-label kutoa maelezo wazi:

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

Kuna kitu kuhusu hili kinahisi kuwa ni meta sana.

Safu ya asili za ulimwengu na asili nyingi za sehemu

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

Wakati ukifanya kazi na programu kubwa zaidi, ni faida kugawanya mistari na tafsiri katika asili nyingi ndogo ndogo. Njia hii husaidia kupunguza ukubwa wa vifurushi na nyakati za uhamishaji, kuhakikisha utoaji lugha unaofaa na unaoweza kupanuka.

Wakati huu ni rahisi pale unaporender tu upande wa mteja, kusimamia asili kunakuwa changamoto haraka pale unapopakua tafsiri kwa ajili ya rendering upande wa seva. Hata hivyo, unaweza kujiendesha usimamizi wa asili kwa kutumia safu ya mteja wa TacoTranslate ya origins.

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 ya uwasilishaji upande wa seva kwa maelezo zaidi kuhusu getTacoTranslateStaticProps.

Kushughulikia makosa na kutatua matatizo

Mila bora

Tumia lebo za ARIA

Safu ya asili za ulimwengu na asili nyingi za sehemu