TacoTranslate
/
ДокументацияЦенообразуване
 
  1. Въведение
  2. Започване
  3. Настройка и конфигурация
  4. Използване на TacoTranslate
  5. Рендиране на сървърната страна
  6. Разширено използване
  7. Най-добри практики
  8. Обработка на грешки и отстраняване на грешки
  9. Поддържани езици

Най-добри практики

Поставете 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.

Вземете за пример този случай, в който сме разделили компонентите и страниците в отделни файлове.

components/pricing-table.tsx
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>
	);
}
pages/pricing.tsx
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.

Обработка на грешки и отстраняване на грешки

Продукт от NattskiftetНаправено в Норвегия