Eng yaxshi amaliyotlar
URL'larni o'zgaruvchilarga qo'ying
URL yoki shunga o‘xshash ma’lumotlarni o‘z ichiga olgan satrlarni tarjima qilayotganda, ushbu URLlarni o‘zgaruvchilarga joylab, so‘ngra 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 qo'shish muhim. ARIA yorliqlari ekran o'qish dasturlariga elementning vazifasi haqida mazmunli ma'lumot berishda yordam beradi.
Masalan, agar sizda foydalanuvchilarga kod blokidagi matnni nusxalash imkonini beruvchi tugma bo'lsa, aniq ta'rif berish uchun aria-label atributidan foydalanishingiz mumkin:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>Bunda nimadir juda meta tuyuladi.
Global manbalar massivi va komponentlarning bir nechta manbalari
Ushbu naqsh faqat Next.js Pages Router ishlatilganda ishlaydi.
Katta ilovalar bilan ishlaganda, satrlarni va tarjimalarni bir nechta, kichikroq manbalarga bo'lish foydali. Bu yondashuv paket hajmini va uzatish vaqtlarini kamaytirishga yordam beradi, samarali va kengaytiriladigan lokalizatsiyani ta'minlaydi.
Bu faqat mijoz tomonida render qilganda oddiyroq bo'lsa-da, server tomonida render qilish uchun tarjimalarni olishda manbalarni boshqarish tezda murakkablashadi. Biroq, TacoTranslate klientidagi origins massividan foydalanib manbalarni boshqarishni avtomatlashtirishingiz mumkin.
Quyidagi misolni ko'rib chiqing, unda biz komponentlarimiz va sahifalarimizni alohida fayllarga ajratganmiz.
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>
);
}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});
}Bizning server-side rendering misollarimizga qarang, getTacoTranslateStaticProps haqida qo'shimcha ma'lumot olish uchun.