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

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

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 ознаки

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