Nyaraka za Maelekezo: Mbinu Bora

Mila bora

Swahili

Weka URL katika vigezo

Wakati wa kutafsiri mistari inayojumuisha URL au data zinazofanana, inachukuliwa kuwa ni utaratibu mzuri kuweka URL hizi ndani ya vigezo na kisha kuzitaja ndani ya templeti zako.

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

Unapotafsiri maandishi ya vipengele vinavyoshirikiana kama vifungo, ni muhimu kujumuisha lebo za ARIA ili kuhakikisha upatikanaji. Lebo za ARIA husaidia wasomaji wa skrini kutoa taarifa za kuelezea kuhusu kazi ya kipengele hicho.

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

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

Kitu fulani kuhusu hili kinahisi sana meta.

Msururu wa asili za kimataifa na asili nyingi za vipengele

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

Wakati unafanya kazi na programu kubwa, ni nzuri kugawanya mistari na tafsiri katika asili nyingi, ndogo ndogo. Njia hii husaidia kupunguza ukubwa wa vifurushi na muda wa uhamishaji, kuhakikisha uwanja wa lugha unaotegemewa na unaoweza kupanuka kwa urahisi.

Ingawa hii ni rahisi wakati wa kutoa maonyesho upande wa mteja pekee, kusimamia asili hupata ugumu haraka wakati wa kupata tafsiri kwa ajili ya utoaji upande wa seva. Hata hivyo, unaweza kujiendesha kusimamia asili kwa kutumia safu ya mteja ya TacoTranslate origins.

Fikiria 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});
}

Tazama mifano ya uchoraji upande wa seva kwa maelezo zaidi kuhusu getTacoTranslateStaticProps.

Kushughulikia makosa na kutatua matatizo

Mila bora

Tumia lebo za ARIA

Msururu wa asili za kimataifa na asili nyingi za vipengele