Eng yaxshi amaliyotlar
URL manzillarini o'zgaruvchilarga joylashtiring
URL'larni yoki shunga o'xshash ma'lumotlarni o'z ichiga olgan satrlarni tarjima qilayotganda, bu URL'larni o'zgaruvchilarga joylashtirib, 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 kiritish muhim. ARIA yorliqlari ekran o'qish dasturlariga elementning funksiyasi haqida tavsiflovchi 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"
/>Bunda bir narsa juda meta kabi tuyuladi.
Global manbalar massivi va bir nechta komponent manbalari
Ushbu naqsh faqat Next.js Pages Routerdan foydalanganda ishlaydi.
Yirik ilovalar bilan ishlaganda, matnlar va tarjimalarni bir nechta, kichikroq manbalarga ajratish foydali hisoblanadi. Bu yondashuv paket hajmini va uzatish vaqtini kamaytirib, samarali va masshtablanuvchi lokalizatsiyani taʼminlaydi.
Bu faqat mijoz tomonida render qilinganda sodda boʻlsa-da, server tomonida render qilish uchun tarjimalarni olishda manbalarni boshqarish tezda murakkablashadi. Biroq, manbalarni boshqarishni TacoTranslate klientining origins massividan foydalanib avtomatlashtirishingiz mumkin.
Quyidagi misolga eʼtibor bering: komponentlarimiz va sahifalarimizni alohida fayllarga ajratdik.
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});
}getTacoTranslateStaticProps haqida ko'proq ma'lumot olish uchun bizning server tomonida render qilish bo'yicha misollarimizga qarang.