TacoTranslate
/
DokumentaatioHinnoittelu
 
  1. Johdanto
  2. Aloittaminen
  3. Asennus ja määritys
  4. TacoTranslatea käyttäminen
  5. Palvelinpuolen renderöinti
  6. Edistynyt käyttö
  7. Parhaat käytännöt
  8. Virheenkäsittely ja vianmääritys
  9. Tuetut kielet

Parhaat käytännöt

Aseta 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 muuttujiksi ja viitata niihin malleissasi.

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

Käytä ARIA-tunnisteita

Kun käännät vuorovaikutteisten elementtien, kuten painikkeiden, tekstejä, on tärkeää lisätä ARIA-tunnisteita saavutettavuuden varmistamiseksi. ARIA-tunnisteet auttavat näytönlukijoita antamaan 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 antaaksesi selkeän kuvauksen:

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

Tässä on jotain todella meta.

Globaali origins-taulukko ja useat komponenttikohtaiset origins-arvot

Tämä malli toimii vain, kun käytetään Next.js Pages Router.

Suurempien sovellusten kanssa työskennellessä on hyödyllistä jakaa merkkijonot ja käännökset useisiin, pienempiin lähteisiin. Tämä tapa auttaa pienentämään pakettikokoja ja siirtoaikoja, mikä varmistaa tehokkaan ja skaalautuvan lokalisaation.

Vaikka tämä on suoraviivaista vain asiakaspuolella renderöitäessä, lähteiden hallinnasta tulee nopeasti monimutkaista, kun haetaan käännöksiä palvelinpuolen renderöintiä varten. Voit kuitenkin automatisoida lähteiden hallinnan hyödyntämällä TacoTranslate-asiakkaan origins taulukkoa.

Tarkastellaan esimerkkiä, jossa olemme erottaneet komponentit ja sivut eri tiedostoihin.

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 palvelinpuolen renderöinnin esimerkkejä saadaksesi lisätietoja getTacoTranslateStaticProps.

Virheenkäsittely ja vianmääritys

Tuote yritykseltä NattskiftetValmistettu Norjassa