Құжаттама: Ең жақсы тәжірибелер

Ең жақсы тәжірибелер

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

Бұл нәрседе біртүрлі мета сезімі бар.

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

Бұл үлгі тек Next.js Pages Router қолданғанда ғана жұмыс істейді.

Үлкенірек қосымшалармен жұмыс істегенде, жолдар мен аудармаларды бірнеше, кішігірім origins бөлу пайдалы болады. Бұл тәсіл пакет көлемін және беру уақытын азайтып, тиімді әрі масштабталатын локализацияны қамтамасыз етеді.

Бұл тек клиент жағында рендеринг жасағанда қарапайым болса да, сервер жағында рендеринг үшін аудармаларды алғанда origins басқару күрделене түседі. Дегенмен, TacoTranslate клиентінің origins массивін пайдалану арқылы 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.

Қате өңдеу және жөндеу