Үздік тәжірибелер
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.