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