Най-добри практики
Съхранявайте 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.