TacoTranslate
/
DokumentacijaKainodara
 
  1. Įvadas
  2. Pirmieji žingsniai
  3. Nustatymas ir konfigūracija
  4. TacoTranslate naudojimas
  5. Serverio pusės atvaizdavimas
  6. Išplėstinis naudojimas
  7. Geriausios praktikos
  8. Klaidų tvarkymas ir derinimas
  9. Palaikomos kalbos

Geriausios praktikos

Įdėkite URL adresus į kintamuosius

Verčiant eilutes, kuriose yra URL arba panašios informacijos, gerąja praktika laikoma įdėti šiuos URL adresus į kintamuosius ir naudoti juos šablonuose.

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

Naudokite ARIA etiketes

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 aprašomąją informaciją apie elemento funkciją.

Pavyzdžiui, jei turite mygtuką, leidžiantį vartotojams nukopijuoti 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 meta.

Globalus originų masyvas ir keli komponentų originai

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

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

Nors tai paprasta, kai renderinimas vyksta tik kliento pusėje, šaltinių valdymas greitai tampa sudėtingas, kai vertimus reikia gauti serverio pusės renderinimui. Tačiau galite automatizuoti šaltinių valdymą naudodami TacoTranslate kliento origins masyvą.

Štai pavyzdys, kuriame savo komponentus ir puslapius atskyrėme į 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ų serverio pusės renderinimo pavyzdžius, norėdami sužinoti daugiau apie getTacoTranslateStaticProps.

Klaidų tvarkymas ir derinimas

Produktas iš NattskiftetPagaminta Norvegijoje