Hujjatlashtirish: Eng yaxshi amaliyotlar

Eng yaxshi amaliyotlar

Uzbek

URL’larni o‘zgaruvchilarga joylashtiring

URL yoki shunga o‘xshash ma’lumotlarni o‘z ichiga olgan satrlarni tarjima qilayotganda, ushbu URL’larni o‘zgaruvchilarga joylab, keyin ularni shablonlaringizda murojaat qilish yaxshi amaliyot hisoblanadi.

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

ARIA yorliqlaridan foydalaning

Tugmalar kabi interaktiv elementlarning matnini tarjima qilayotganda, kirish imkoniyatini ta’minlash uchun ARIA yorliqlarini kiritish muhimdir. ARIA yorliqlari ekran o‘quvchilarga elementning funksiyasi haqida tushuntiruvchi ma’lumot berishga yordam beradi.

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

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

Buning haqida nimadir juda meta tuyuladi.

Global origins массиви ва бир нечта компонент манбалари

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

Kattaroq ilovalarda ishlaganda, satrlar va tarjimalarni bir nechta, kichikroq manbalarga bo‘lish foydali hisoblanadi. Ushbu yondashuv paket o‘lchamlarini va uzatish vaqtini kamaytirishga yordam beradi, samarali va kengaytiriladigan lokalizatsiyani ta’minlaydi.

Bu faqat mijoz tomonida render qilinganda oddiy jarayon bo‘lsa-da, server tomonida render qilish uchun tarjimalarni olib kelishda manbalarni boshqarish tezda murakkablashadi. Biroq, siz TacoTranslate klientining origins massividan foydalanib, manbalarni boshqarishni avtomatlashtirishingiz mumkin.

Bu misolga qarang, bu yerda biz komponentlarimiz va sahifalarimizni alohida fayllarga ajratganmiz.

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 server tomonida rendering misollarimizga qarang getTacoTranslateStaticProps.

Xatoliklarni boshqarish va nosozliklarni aniqlash