Најдобри практики
Ставете 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.
Кога се работи со поголеми апликации, е корисно да се подели текстот и преводите во повеќе, помали извори. Овој пристап помага да се намали големината на пакетите и времето на пренос, со што се обезбедува ефикасна и скалабилна локализација.
Иако ова е едноставно кога се рендерира само на клиентската страна, управувањето со извори брзо станува комплексно кога се влечат преводи за серверско рендерирање. Меѓутоа, можете да ја автоматизирате управата на извори со користење на масивот origins на клиентот TacoTranslate.
Разгледајте го овој пример, каде ги одвоивме нашите компоненти и страници во одделни датотеки.
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.