TacoTranslate
/
HujjatlarNarxlash
 
  1. Kirish
  2. Boshlash
  3. Sozlash va konfiguratsiya
  4. TacoTranslate-dan foydalanish
  5. Server tomonlama sahna yaratish
  6. Kengaytirilgan foydalanish
  7. Eng yaxshi tajribalar
  8. Xatoliklarni boshqarish va nosozliklarni tuzatish
  9. Qo‘llab-quvvatlanadigan tillar

Eng yaxshi tajribalar

URL manzillarini o‘zgaruvchilarga joylashtiring

URL manzillari yoki shunga o‘xshash ma’lumotlarni o‘z ichiga olgan satrlarni tarjima qilganda, ushbu URL manzillarni o‘zgaruvchilar ichida saqlash va keyin ularni shablonlaringizda qayd etish yaxshi amaliyot hisoblanadi.

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

ARIA yorliqlardan foydalaning

Interaktiv elementlar, masalan tugmalar matnini tarjima qilganda, kirish imkoniyatini ta’minlash uchun ARIA yorliqlarini qo‘shish muhimdir. ARIA yorliqlari ekran o‘quvchilarga elementning vazifasi haqida tavsifiy ma’lumot berishga yordam beradi.

Masalan, agar sizda foydalanuvchilarga kod blokidan matnni nusxalash imkonini 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 array va bir nechta komponent manbalari

Ushbu naqsh faqat Next.js Pages Router ishlatilganda ishlaydi.

Kattaroq ilovalar bilan ishlaganda, satrlarni va tarjimalarni bir nechta, kichikroq manbalarga bo‘lish foydali bo‘ladi. Bu yondashuv paket hajmini va uzatish vaqtini kamaytirishga yordam beradi, shuningdek, samarali va kengaytiriladigan lokalizatsiyaga imkon yaratadi.

Bu faqat mijoz tomonida render qilinganda oddiy bo‘lsa-da, server tomonida render uchun tarjimalarni olishda manbalarni boshqarish tezda murakkablashadi. Biroq, TacoTranslate mijozining origins massividan foydalanib, manba boshqaruvini avtomatlashtirishingiz mumkin.

Mana bir misol, unda biz komponentlar va sahifalarni 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});
}

Batafsil ma’lumot uchun bizning server tomonlama rendering misollarimizga qarang getTacoTranslateStaticProps.

Xatoliklarni boshqarish va nosozliklarni tuzatish

Nattskiftet mahsulotiNorvegiyada ishlab chiqilgan