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