Nyaraka: Mbinu Bora – TacoTranslate

Mbinu Bora

Swahili

Weka URL katika vigezo

Unapotafsiri stringi zinazojumuisha URLs au data zinazofanana, ni mazoea mazuri kuweka URLs hizo ndani ya vigezo kisha kuzirejelea ndani ya templeti zako.

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

Unapotafsiri maandishi ya vipengele vinavyohusiana na mwingiliano kama vitufe, ni muhimu kujumuisha lebo za ARIA ili kuhakikisha ufikikaji. Lebo za ARIA husaidia programu za kusoma skrini kutoa maelezo ya kuelezea kuhusu kazi ya kipengele.

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

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

Kuna kitu kuhusu hili kinachohisi kuwa 'meta' sana.

Safu ya vyanzo vya kimataifa na vyanzo vingi vya vipengele

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

Unapofanya kazi na programu kubwa, ni vyema kugawanya sehemu za maandishi na tafsiri kuwa vyanzo vingi vidogo. Njia hii husaidia kupunguza ukubwa wa vifurushi na nyakati za uhamisho, ikihakikisha utafsiri wa programu unaofanya kazi vizuri na unaoweza kupanuka.

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

Chukulia mfano huu, ambapo tumegawanya 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});
}

Angalia mifano ya uonyeshaji upande wa seva kwa maelezo zaidi kuhusu getTacoTranslateStaticProps.

Usimamizi wa makosa na utatuzi wa matatizo

Mbinu Bora

Tumia lebo za ARIA

Safu ya vyanzo vya kimataifa na vyanzo vingi vya vipengele