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

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

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 մասին։

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