Hujjatlar: Eng yaxshi amaliyotlar

Eng yaxshi amaliyotlar

Uzbek

URL manzillarini o'zgaruvchilarga joylashtiring

URL manzillarini yoki shunga o‘xshash ma’lumotlarni o‘z ichiga olgan satrlarni tarjima qilishda, bu URL manzillarni o‘zgaruvchilarga joylashtirish va keyin ularni shablonlaringizda murojaat qilish yaxshi amaliyot hisoblanadi.

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

ARIA yorliqlaridan foydalaning

Interaktiv elementlar, masalan tugmalar matnini tarjima qilganda, mavjudlikni ta’minlash uchun ARIA yorliqlarini kiritish muhimdir. ARIA yorliqlari ekran o‘quvchilarga elementning funktsiyasi haqida tavsifli ma’lumot berishga yordam beradi.

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

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

Buning haqida biror narsa juda meta kabi tuyuladi.

Global manbalar massivi va bir nechta komponent manbalari

Bu naqsh faqat Next.js Pages Router dan foydalanganda ishlaydi.

Kattaroq ilovalar bilan ishlayotganda, satrlar va tarjimalarni bir nechta, kichikroq originsga bo‘lish foydalidir. Bu yondashuv paket hajmini va uzatish vaqtini kamaytirishga yordam beradi, samarali va kengaytiriladigan lokalizatsiyani ta’minlaydi.

Bu mijoz tomonida faqat render qilinganda oddiy ko‘rina olsa-da, server tomonida render qilish uchun tarjimalarni olishda originsni boshqarish tezda murakkablashadi. Biroq, TacoTranslate mijozining origins massividan foydalanib, qiymatlarni boshqarishni avtomatlashtirishingiz mumkin.

Misol uchun, komponentlar va sahifalarimizni alohida fayllarga ajratgan holatni 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});
}

Qo‘shimcha ma’lumot uchun getTacoTranslateStaticProps haqida bizning server tarafdan rendering misollarimiz ga qarang.

Xatoliklarni boshqarish va xatolarni tuzatish