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

Լավագույն փորձերը

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

Սխալների մշակումը և կարգավորումը