Parhaat käytännöt
Tallenna URL-osoitteet muuttujiin
Kun käännetään merkkijonoja, jotka sisältävät URL-osoitteita tai vastaavia tietoja, on hyvän käytännön mukaista sijoittaa nämä URL-osoitteet muuttujiksi ja viitata niihin malleissa.
<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, tekstiä, on tärkeää lisätä ARIA-tunnisteita saavutettavuuden varmistamiseksi. ARIA-tunnisteet auttavat ruudunlukuohjelmia 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 antamiseen:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>Tämä tuntuu jotenkin hyvin metalta.
Globaali alkuperätaulukko ja useat komponenttikohtaiset alkuperät
Tämä malli toimii vain, kun käytetään Next.js Pages Router.
Kun työskennellään suuremmissa sovelluksissa, on hyödyllistä jakaa merkkijonot ja käännökset useampiin, pienempiin origin-lähteisiin. Tämä lähestymistapa auttaa pienentämään pakettien kokoa ja siirtoaikoja, mikä varmistaa tehokkaan ja skaalautuvan lokalisaation.
Vaikka tämä on yksinkertaista, kun renderöinti tapahtuu vain asiakaspuolella, originien hallinnasta tulee nopeasti monimutkaista, kun käännöksiä haetaan palvelinpuolen renderöintiä varten. Voit kuitenkin automatisoida originien hallinnan hyödyntämällä TacoTranslate-asiakkaan origins-taulukkoa.
Tarkastellaan tätä esimerkkiä, jossa olemme jakaneet komponenttimme ja sivumme eri tiedostoihin.
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>
);
}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.