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