Үздік тәжірибелер
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"
/>Бұл жерде бір нәрсе өте мета сияқты.
Жаһандық шығу көздерінің массиві және бірнеше компоненттерге арналған шығу көздері
Бұл үлгі тек 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.