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

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

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

Մանրամասների համար դիտեք մեր սերվերային կողմի (server-side rendering) օրինակները՝ getTacoTranslateStaticProps.

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