Үздік тәжірибелер
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 қолданғанда ғана жұмыс істейді.
Үлкен қосымшалармен жұмыс істегенде, жолдар мен аудармаларды бірнеше, кішігірім қайнар көздерге бөлу пайдалы. Бұл тәсіл бандл көлемдерін және жіберу уақыттарын азайтуға көмектесіп, локализацияның тиімді әрі масштабталуын қамтамасыз етеді.
Бұл тек клиент жағында рендер жасағанда қарапайым көрінсе де, сервер жақта рендерлеу үшін аудармаларды алғанда қайнар көздерді басқару тез арада күрделене түседі. Алайда TacoTranslate клиентінің origins массивін пайдаланып, қайнар көздерді басқаруды автоматтандыруға болады.
Компоненттеріміз бен беттерімізді бөлек файлдарға бөліп қойған осы мысалды қарастырыңыз.
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.