Hujjatlar: Eng yaxshi amaliyotlar

Eng yaxshi amaliyotlar

Uzbek

URL’larni o‘zgaruvchilarga joylashtiring

URL manzillari yoki shunga o‘xshash ma’lumotlarni o‘z ichiga olgan satrlarni tarjima qilayotganda, bu URL manzillarni o‘zgaruvchilar ichiga joylashtirish va keyin ularni shablonlaringizda ishora qilish yaxshi amaliyot hisoblanadi.

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

ARIA yorliqlaridan foydalaning

Tugatgichlar kabi interaktiv elementlarning matnini tarjima qilayotganda, kirish imkoniyatini ta’minlash uchun ARIA yorliqlarini kiritish muhimdir. ARIA yorliqlari ekran o‘quvchilarga elementning funksiyasi haqida tavsifiy ma’lumot 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 qandaydir jihati juda meta tuyuladi.

Global origins array va bir nechta komponent origins

Bu naqsh faqat Next.js Pages Router ishlatilganda ishlaydi.

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

Bu faqat mijoz tomonida ishlatilganda oson bo‘lsa-da, server tomonida sahna berish uchun tarjimalarni olishda manbalarni boshqarish tezda murakkablashadi. Biroq, siz TacoTranslate mijozining origins massividan foydalanib manbalarni boshqarishni avtomatlashtirishingiz mumkin.

Quyidagi misolga e'tibor bering, bu yerda biz komponentlarimiz va sahifalarimizni alohida fayllarga ajratdik.

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});
}

Ko‘proq ma’lumot uchun getTacoTranslateStaticProps haqida bizning server tomonlama render qilish misollarimizga qarang.

Xato bilan ishlash va xatoliklarni tuzatish