Документација: Најдобри практики

Најдобри практики

Macedonian

Стави URLs во променливи

Кога преведувате текстови кои содржат URL-адреси или слични податоци, се смета за добра пракса да ги сместите овие URL-адреси во променливи и потоа да ги повикувате во вашите шаблони.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

Кога преведувате текст на интерактивни елементи како копчиња, важно е да вклучите 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.

Ракомодарење со грешки и отстранување на грешки

Најдобри практики

Користете ARIA ознаки

Глобален низ на оригинали и повеќе оригинали на компоненти