Dokumentacija: Geriausios praktikos

Geriausios praktikos

Lithuanian

Įdėkite URL į kintamuosius

Kai verčiate eilutes, kuriose yra URL ar panašių duomenų, laikoma gera praktika šiuos URL įdėti į kintamuosius ir tada juos nurodyti savo šablonuose.

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

Kai verčiate interaktyvių elementų, tokių kaip mygtukai, tekstą, svarbu įtraukti ARIA etiketes, kad būtų užtikrintas prieinamumas. ARIA etiketės padeda ekrano skaitytuvams pateikti aprašomą informaciją apie elemento funkciją.

Pavyzdžiui, jei turite mygtuką, leidžiantį vartotojams kopijuoti tekstą iš kodo bloko, galite naudoti aria-label atributą, kad pateiktumėte aiškų aprašymą:

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

Kažkas šiame jausme yra labai meta.

Globalių kilmės šaltinių masyvas ir keli komponentų kilmės šaltiniai

Šis šablonas veikia tik naudojant Next.js Pages Router.

Dirbant su didesnėmis programomis, naudinga išskaidyti tekstus ir vertimus į kelis mažesnius origin failus. Šis metodas padeda sumažinti paketo dydį ir perdavimo laiką, užtikrinant efektyvų ir mastelį palaikantį lokalizavimą.

Nors tai yra paprasta, kai renderinama tik kliento pusėje, origin valdymas greitai tampa sudėtingas, kai vertimai įkeliami serverio pusėje. Tačiau galite automatizuoti origin valdymą naudodami TacoTranslate kliento origins masyvą.

Apsvarstykite šį pavyzdį, kuriame mūsų komponentai ir puslapiai yra atskirtuose failuose.

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

Žr. mūsų serverinio atvaizdavimo pavyzdžius, jei norite sužinoti daugiau apie getTacoTranslateStaticProps.

Klaidų tvarkymas ir derinimas

Geriausios praktikos

Naudokite ARIA žymes

Globalių kilmės šaltinių masyvas ir keli komponentų kilmės šaltiniai