Nyaraka: Mbinu Bora – TacoTranslate

Mazoea bora

Swahili

Weka URL katika vigezo

Wakati unapotafsiri kamba za maandishi zinazojumuisha URL au data inayofanana, ni desturi nzuri kuweka URL hizi ndani ya vigezo (variables) kisha kuzirejelea ndani ya templeti zako.

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

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

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

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

Kitu kuhusu hili kinahisi kuwa meta sana.

Msururu wa vyanzo vya kimataifa na vyanzo vingi vya komponenti

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

Unapofanya kazi na programu kubwa, ni vyema kugawanya sehemu za maandishi na tafsiri katika vyanzo vingi, vidogo. Mbinu hii husaidia kupunguza ukubwa wa vifurushi na muda wa uhamishaji, hivyo kuhakikisha tafsiri zinafanywa kwa ufanisi na zinaoweza kupanuka.

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

Angalia mfano huu, ambapo tumezitenga vipengele na kurasa zetu katika mafaili 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 uonyeshaji upande wa seva kwa maelezo zaidi kuhusu getTacoTranslateStaticProps.

Kushughulikia makosa na utatuzi wa hitilafu

Mazoea bora

Tumia lebo za ARIA

Msururu wa vyanzo vya kimataifa na vyanzo vingi vya komponenti