Փաստաթղթավորում: Լավագույն փորձեր

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

Armenian

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

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

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

Ինտերակտիվ տարրերի (օրինակ՝ կոճակներ) տեքստը թարգմանելիս կարևոր է ներառել 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-ի մասին։

Սխալների կառավարում և դեբագավորում

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

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

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