Үздік тәжірибелер
URL-мекенжайларды айнымалыларда сақтаңыз
URL мекенжайлары немесе ұқсас деректер қамтылған жолдарды аударғанда, осы URL-дарды айнымалыларға орналастырып, кейін шаблондарыңызда оларға сілтеме жасау жақсы тәжірибе болып есептеледі.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>ARIA белгілерін пайдаланыңыз
Интерактивті элементтерге, мысалы батырмаларға арналған мәтінді аударғанда қолжетімділікті қамтамасыз ету үшін ARIA белгілеулерін қосу маңызды. ARIA белгілеулері экрандық оқырмыларға элементтің функциясы туралы сипаттамалық ақпарат беруге көмектеседі.
Мысалы, егер сізде код блогынан мәтінді көшіруге мүмкіндік беретін батырма болса, нақты сипаттама беру үшін aria-label атрибутын пайдалана аласыз:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>Мұнда бір нәрсе өте мета сияқты сезіледі.
Жаһандық origins массиві және бірнеше компоненттерге арналған origins
Бұл үлгі тек Next.js Pages Router қолданғанда ғана жұмыс істейді.
Үлкенірек қосымшалармен жұмыс істегенде жолдар мен аудармаларды бірнеше, кішірек origin-тарға бөлу пайдалы. Бұл тәсіл пакет көлемін және тасымалдау уақытын азайтуға көмектесіп, тиімді әрі масштабталатын локализацияны қамтамасыз етеді.
Бұл тек клиент жағында рендер жасағанда қарапайым болса да, сервер жағындағы рендер үшін аудармаларды алғанда origin-дарды басқару тез күрделене түседі. Дегенмен, TacoTranslate клиентінің origins массивін пайдаланып origin-дарды басқаруды автоматтандыруға болады.
Компоненттеріміз бен беттерімізді бөлек файлдарға бөлген мына мысалды қарастырыңыз.
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 туралы қосымша ақпарат алу үшін біздің сервер жағындағы рендерлеу мысалдарын қараңыз.