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

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

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 туралы қосымша ақпарат алу үшін біздің сервер жағындағы рендерлеу мысалдарына қараңыз getTacoTranslateStaticProps.

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