Құжаттама: Үздік тәжірибелер

Үздік тәжірибелер

Kazakh

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"
/>

Мұның бір жағы өте мета сияқты сезіледі.

Жаһандық origins массиві және бірнеше компонент origins-тары

Бұл үлгі тек 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 туралы көбірек ақпарат алу үшін біздің серверлік рендерлеу мысалдарын қараңыз.

Қателерді өңдеу және ақауларды түзету