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