TacoTranslate
/
DokumentaatioHinnoittelu
 
  1. Johdanto
  2. Aloittaminen
  3. Asennus ja konfigurointi
  4. TacoTranslate:n käyttäminen
  5. Palvelinpuolen renderöinti
  6. Edistynyt käyttö
  7. Parhaat käytännöt
  8. Virheenkäsittely ja virheiden jäljitys
  9. Tuetut kielet

Parhaat käytännöt

Laita URL-osoitteet muuttujiksi

Kun käännetään merkkijonoja, jotka sisältävät URL-osoitteita tai vastaavia tietoja, on hyvä käytäntö sijoittaa nämä URL-osoitteet muuttujien sisään ja viitata niihin sitten malleissasi.

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

Käytä ARIA-tunnisteita

Kun käännetään vuorovaikutteisten elementtien, kuten painikkeiden, tekstejä, on tärkeää sisällyttää ARIA-tunnisteet saavutettavuuden varmistamiseksi. ARIA-tunnisteet auttavat ruudunlukijoita tarjoamaan kuvailevaa tietoa elementin toiminnasta.

Esimerkiksi, jos sinulla on painike, jonka avulla käyttäjät voivat kopioida tekstiä koodilohkosta, voit käyttää aria-label attribuuttia selkeän kuvauksen antamiseksi:

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

Tässä on jotain, mikä tuntuu hyvin metatasoiselta.

Globaalit alkuperätaulukot ja useat komponenttien alkuperät

Tämä malli toimii vain käytettäessä Next.js Pages Router-reititintä.

Kun työskennellään suurempien sovellusten kanssa, on hyödyllistä jakaa merkkijonot ja käännökset useisiin pienempiin lähtöihin. Tämä lähestymistapa auttaa vähentämään pakettien kokoa ja siirtoaikoja, varmistaen tehokkaan ja skaalautuvan lokalisaation.

Vaikka tämä on suoraviivaista, kun renderöidään vain asiakaspuolella, lähtöjen hallinta muuttuu nopeasti monimutkaiseksi, kun haetaan käännöksiä palvelinpuolen renderöintiä varten. Voit kuitenkin automatisoida lähtöjen hallinnan käyttämällä TacoTranslate-asiakkaan origins taulukkoa.

Ota esimerkiksi tämä, jossa olemme erottaneet komponenttimme ja sivumme omiin tiedostoihinsa.

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

Katso lisää tietoa getTacoTranslateStaticProps -toiminnosta serverin puolen renderöintiesimerkeistämme.

Virheenkäsittely ja virheiden jäljitys

Tuote yritykseltä NattskiftetValmistettu Norjassa