Dokumentacija: Geriausios praktikos

Geriausios praktikos

Lithuanian

Įrašykite URL adresus į kintamuosius

Verčiant eilutes, kuriose yra URL ar panašių duomenų, laikoma gera praktika įdėti šiuos URL į kintamuosius ir tada naudoti juos savo šablonuose.

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

Naudokite ARIA žymas

Verčiant interaktyvių elementų, pavyzdžiui, mygtukų, tekstą, svarbu įtraukti ARIA etiketes, kad būtų užtikrintas prieinamumas. ARIA etiketės padeda ekrano skaitytuvams pateikti aiškią 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"
/>

Tai kažkaip atrodo labai savireferentiška.

Globalus originų masyvas ir keli komponentų originai

Šis modelis veikia tik naudojant Next.js Pages Router.

Dirbant su didesnėmis programomis, naudinga išskaidyti teksto eilutes ir vertimus į kelis, mažesnius šaltinius. Toks požiūris padeda sumažinti paketų dydžius ir perdavimo laikus, užtikrinant efektyvią ir lengvai išplečiamą lokalizaciją.

Nors tai paprasta, kai atvaizdavimas vyksta tik kliento pusėje, šaltinių valdymas greitai tampa sudėtingas, kai gaunami vertimai serverinio atvaizdavimo metu. Tačiau galite automatizuoti šaltinių valdymą naudodami TacoTranslate kliento origins masyvą.

Apsvarstykite šį pavyzdį, kuriame komponentai ir puslapiai yra atskirti į atskirus failus.

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

Peržiūrėkite mūsų serveryje vykdomo renderinimo pavyzdžius, kad sužinotumėte daugiau apie getTacoTranslateStaticProps.

Klaidų tvarkymas ir derinimas