Најдобри практики
Ставете 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.