Parhaat käytännöt
Aseta URL-osoitteet muuttujiin
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 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, tekstiä, on tärkeää sisällyttää ARIA-tunnisteet saavutettavuuden varmistamiseksi. ARIA-tunnisteet auttavat ruudunlukuohjelmia tarjoamaan kuvailevaa tietoa elementin toiminnasta.
Esimerkiksi, jos sinulla on painike, joka sallii käyttäjien kopioida tekstiä koodilohkosta, voit käyttää aria-label -attribuuttia selkeän kuvauksen tarjoamiseen:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>Jokin tässä tuntuu hyvin metatasoiselta.
Globaalien originien taulukko ja useat komponenttien origin voidaan käyttää yhdessä
Tämä malli toimii vain käytettäessä Next.js Pages Router-reititintä.
Kun työskennellään suurempien sovellusten parissa, on hyödyllistä jakaa merkkijonot ja käännökset useisiin, pienempiin origineihin. Tämä lähestymistapa auttaa vähentämään pakettien kokoa ja siirtoaikoja, mikä varmistaa tehokkaan ja skaalautuvan lokalisaation.
Vaikka tämä on suoraviivaista, kun renderöinti tapahtuu vain asiakaspuolella, originaalien hallinnasta tulee nopeasti monimutkaista käännöksiä haettaessa palvelinpuolen renderöintiin. Kuitenkin originaalien hallinnan voi automatisoida käyttämällä TacoTranslate-asiakkaan origins -taulukkoa.
Tarkastele tätä esimerkkiä, jossa olemme erottaneet komponenttimme ja sivumme omiin tiedostoihinsa.
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 lisää tietoa getTacoTranslateStaticProps -toiminnosta palvelinpuolen renderöinnin esimerkeistämme.