Լրատվամիջոցներ՝ Լավագույն փորձառություններ

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

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 պիտակները

Համաշխարհային սկզբնաղբյուրների զանգված և բազմաթիվ կոմպոնենտային սկզբնաղբյուրներ