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

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

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 մասին լրացուցիչ տեղեկությունների համար։

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