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

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

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 օգտագործելիս։

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

Չնայած սա պարզ է միայն հաճախորդի կողմից ռենդերելիս, սկզբնաղբյուրների կառավարումը արագորեն բարդանում է, երբ թարգմանություններ են բեռվում սերվերային ռենդերինգի համար։ Այնուամենայնիվ, դուք կարող եք ավտոմատացնել սկզբնաղբյուրների կառավարումը՝ օգտագործելով 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.

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