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