Dokumentacija: Geriausios praktikos

Geriausios praktikos

Lithuanian

Įdėkite URL į kintamuosius

Verčiant eilutes, kuriose yra URL ar panašių duomenų, laikoma gerąja praktika talpinti šiuos URL į kintamuosius ir tada nuorodomis juos naudoti savo šablonuose.

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

Verčiant interaktyvių elementų, tokių kaip mygtukai, tekstą, svarbu įtraukti ARIA etiketes, kad būtų užtikrintas prieinamumas. ARIA etiketės padeda ekrano skaitytuvams pateikti apibūdinamą informaciją apie elemento funkciją.

Pavyzdžiui, jei turite mygtuką, leidžiantį vartotojams kopijuoti tekstą iš kodo bloko, galite naudoti aria-label atributą aiškiam aprašymui pateikti:

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

Šiame yra kažkas labai meta.

Global origins masyvas ir keli komponentų originai

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

Dirbant su didesnėmis programomis, naudinga atskirti tekstus ir vertimus į kelis mažesnius originus. Šis požiūris padeda sumažinti paketų dydžius ir perdavimo laiką, užtikrinant efektyvų ir skalūojamą lokalizavimą.

Nors tai yra paprasta vykdant atvaizdavimą tik kliento pusėje, originų valdymas greitai tampa sudėtingas, kai reikia gauti vertimus serverio pusės atvaizdavimui. Tačiau galite automatizuoti originų valdymą naudodami TacoTranslate kliento origins masyvą.

Apsvarstykite šį pavyzdį, kai mūsų 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});
}

Žr. mūsų serverio pusės atvaizdavimo pavyzdžius daugiau informacijos apie getTacoTranslateStaticProps.

Klaidų tvarkymas ir derinimas

Geriausios praktikos

Naudokite ARIA etiketes

Global origins masyvas ir keli komponentų originai