Փաստաթղթավորում: Լավագույն պրակտիկաներ

Լավագույն պրակտիկաներ

Armenian

URL-ները տեղադրեք փոփոխականներում

Երբ թարգմանում եք տողեր, որոնք պարունակում են URL-ներ կամ նմանատիպ տվյալներ, լավ պրակտիկա է այդ URL-ները տեղադրել փոփոխականներում և այնուհետև հղվել դրանց ձեր ձևանմուշներում։

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

Օգտագործել ARIA պիտակները

Ինտերակտիվ տարրերի, ինչպիսիք են կոճակները, տեքստը թարգմանելիս կարևոր է ավելացնել ARIA պիտակներ՝ հասանելիությունը ապահովելու համար։ ARIA պիտակները օգնում են էկրան ընթերցող ծրագրերին ներկայացնել տարրի գործառույթի հստակ նկարագրությունը։

Օրինակ՝ եթե դուք ունեք կոճակ, որը թույլ է տալիս օգտատերերին պատճենել տեքստը կոդային բլոկից, կարող եք օգտագործել aria-label հատկությունը՝ հստակ նկարագրություն տրամադրելու համար:

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

Սա ինչ-որ չափով շատ մետա է թվում։

Գլոբալ ծագումների զանգվածը և կոմպոնենտների բազմակի ծագումներ

Այս նմուշը գործում է միայն Next.js Pages Router օգտագործելիս։

Մեծ հավելվածների հետ աշխատելիս օգտակար է տողերն ու թարգմանությունները բաժանել մի քանի, ավելի փոքր աղբյուրների։ Այս մոտեցումը օգնում է նվազեցնել փաթեթների չափերը և փոխանցման ժամանակները՝ ապահովելով արդյունավետ և մասշտաբային տեղայնացում։

Չնայած սա պարզ է միայն հաճախորդի կողմում արտապատկերելու դեպքում, աղբյուրների կառավարումը արագ բարդանում է, երբ պետք է բեռնել թարգմանություններ սերվերի կողմի արտապատկերման (server-side rendering) համար։ Սակայն կարող եք ավտոմատացնել աղբյուրների կառավարումը՝ օգտագործելով TacoTranslate հաճախորդի origins զանգվածը։

Նայեք այս օրինակին, որտեղ մենք մեր կոմպոնենտները և էջերը բաժանել ենք առանձին ֆայլերի։

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

Լրացուցիչ տեղեկությունների համար դիտեք մեր սերվերային կողմի ռենդերինգի օրինակները՝ getTacoTranslateStaticProps-ի վերաբերյալ։

Սխալների մշակում և շտկում