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