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

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

Macedonian

Ставете 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.

Ракување со грешки и дебагирање