Dokumentáció: Legjobb gyakorlatok

Legjobb gyakorlatok

Hungarian

Tegye az URL-eket változókba

Amikor URL-eket vagy hasonló adatokat tartalmazó szövegeket fordítasz, jó gyakorlat ezeket az URL-eket változókba helyezni, majd a sablonjaidban hivatkozni rájuk.

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

Interaktív elemek, például gombok szövegének fordításakor fontos, hogy tartalmazzanak ARIA-címkéket az akadálymentesség biztosítása érdekében. Az ARIA-címkék segítik a képernyőolvasókat abban, hogy leíró információt nyújtsanak az elem funkciójáról.

Például ha van egy gomb, amellyel a felhasználók egy kódblokkból szöveget másolhatnak, a aria-label attribútummal egyértelmű leírást adhatunk:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

Valami ebben nagyon meta.

Globális origins tömb és több komponens originjei

Ez a minta csak a Next.js Pages Router használata esetén működik.

Nagyobb alkalmazások esetén érdemes a szövegeket és a fordításokat több, kisebb originokra bontani. Ez a megközelítés segít csökkenteni a csomagméretet és az átvitel idejét, így hatékony és skálázható lokalizációt biztosít.

Ez egyszerű, ha csak kliensoldalon renderelsz, de az originok kezelése gyorsan bonyolulttá válik, amikor fordításokat kell lekérni szerveroldali rendereléshez. Azonban az originok kezelését automatizálhatod a TacoTranslate kliens origins tömbjének használatával.

Nézzük meg ezt a példát, ahol a komponenseinket és az oldalainkat külön fájlokba szerveztük.

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});
}

A getTacoTranslateStaticProps részletesebb megismeréséhez tekintse meg a szerveroldali renderelés példáit.

Hibakezelés és hibakeresés

Legjobb gyakorlatok

ARIA-címkék használata

Globális origins tömb és több komponens originjei