TacoTranslate
/
HujjatlarNarxlar
 
  1. Kirish
  2. Boshlash
  3. O'rnatish va sozlash
  4. TacoTranslate'dan foydalanish
  5. Server tomonida renderlash
  6. Kengaytirilgan foydalanish
  7. Eng yaxshi amaliyotlar
  8. Xatoliklarni qayta ishlash va nosozliklarni tuzatish
  9. Qo'llab-quvvatlanadigan tillar

Eng yaxshi amaliyotlar

URL manzillarini o'zgaruvchilarga joylang

URL yoki shunga o'xshash ma'lumotlarni o'z ichiga olgan satrlarni tarjima qilayotganda, ushbu URL'larni o'zgaruvchilarga joylab, keyin ularni shablonlaringizda ishlatish 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 qo'shish muhimdir. ARIA yorliqlari ekran o'qiydigan dasturlarga elementning vazifasi haqida batafsil ma'lumot berishda 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"
/>

Bunda nimadir juda meta tuyuladi.

Global origins massivi va bir nechta komponent originlari

Bu naqsh faqat Next.js Pages Router ishlatilganda ishlaydi.

Katta ilovalar bilan ishlaganda, satrlarni va tarjimalarni bir nechta, kichikroq manbalarga ajratish foydali hisoblanadi. Bu yondashuv paket hajmini va uzatish vaqtini kamaytiradi, shu bilan samarali va masshtablanadigan lokalizatsiyani taʼminlaydi.

Bu faqat mijoz tomonida render qilinganda oddiyroq bo'lsa-da, server tomonida render qilish uchun tarjimalarni olishda manbalarni boshqarish tezda murakkablashadi. Biroq, TacoTranslate mijozidagi origins massividan foydalanib, manbalarni boshqarishni avtomatlashtirishingiz mumkin.

Quyidagi misolga qarang: 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});
}

Batafsil ma'lumot olish uchun server tomonida render qilish misollarimizni ko'rib chiqing getTacoTranslateStaticProps.

Xatoliklarni qayta ishlash va nosozliklarni tuzatish

Nattskiftetning mahsulotiNorvegiyada ishlab chiqarilgan