TacoTranslate
/
DokumentaatioHinnoittelu
 
  1. Johdanto
  2. Aloittaminen
  3. Asennus ja määritys
  4. TacoTranslaten 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 muuttujiin

Kun käännät merkkijonoja, jotka sisältävät URL-osoitteita tai vastaavaa, on hyvä käytäntö tallentaa nämä URL-osoitteet muuttujiin ja viitata niihin malleissasi.

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

Käytä ARIA-etikettejä

Kun käännetään interaktiivisten elementtien, kuten painikkeiden, tekstiä, on tärkeää sisällyttää ARIA-etiketit saavutettavuuden varmistamiseksi. ARIA-etiketit auttavat ruudunlukijoita 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 hyvin metaa.

Globaali origins-taulukko ja useiden komponenttien originit

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

Suurempien sovellusten kanssa työskennellessä kannattaa jakaa merkkijonot ja käännökset useampiin, pienempiin lähteisiin. Tämä vähentää pakettien kokoa ja siirtoaikoja, mikä varmistaa tehokkaan ja skaalautuvan lokalisaation.

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

Tarkastellaan esimerkkiä, jossa olemme jakaneet komponentit ja sivut 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 palvelinpuolen renderöinnin esimerkkimme saadaksesi lisätietoja getTacoTranslateStaticProps.

Virheenkäsittely ja vianmääritys

Tuote yritykseltä NattskiftetValmistettu Norjassa