Hujjatlar: Eng yaxshi amaliyotlar

Eng yaxshi amaliyotlar

Uzbek

URL manzillarini o'zgaruvchilarga joylang

URL yoki shunga o'xshash ma'lumotlarni o'z ichiga olgan satrlarni tarjima qilayotganda, bu URL'larni o'zgaruvchilarda saqlab, keyin shablonlaringizda ularga murojaat qilish yaxshi amaliyot hisoblanadi.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

ARIA yorliqlaridan foydalaning

Tugma kabi interaktiv elementlarning matnini tarjima qilayotganda, kirish imkoniyatini ta'minlash uchun ARIA yorliqlarini kiritish muhimdir. ARIA yorliqlari ekran o'qiydigan dasturlarga elementning vazifasi haqida tavsiflovchi ma'lumot berishga yordam beradi.

Masalan, agar sizda kod blokidan matnni foydalanuvchilarga nusxalash imkonini beruvchi tugma bo'lsa, aniq ta'rif berish uchun aria-label atributidan foydalanishingiz mumkin:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

Bunda nimadir juda meta kabi tuyuladi.

Global originlar massivi va bir nechta komponent originlari

Bu shablon faqat Next.js Pages Routerdan foydalanganda ishlaydi.

Katta ilovalar bilan ishlaganda, satrlarni va tarjimalarni bir nechta, kichik originlarga ajratish foydali bo‘ladi. Bu yondashuv paket hajmini va uzatish vaqtini kamaytirishga yordam beradi, samarali va masshtablanuvchi lokallashtirishni ta’minlaydi.

Bu faqat mijoz tomonida render qilinganda sodda bo‘lsa-da, server tomonida render qilish uchun tarjimalarni yuklayotganda originlarni boshqarish tezda murakkablashadi. Biroq, TacoTranslate mijozining origins massividan foydalanib originlarni avtomatlashtirishingiz mumkin.

Komponentlarimiz va sahifalarimizni alohida fayllarga ajratgan quyidagi misolni ko‘rib chiqing.

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 haqida batafsil ma'lumot olish uchun bizning server tomonida renderlash misollarimizga qarang.

Xatolarni boshqarish va tuzatish