Parhaat käytännöt
Laita URL-osoitteet muuttujiksi
Kun käännetään merkkijonoja, jotka sisältävät URL-osoitteita tai vastaavaa, on hyvä käytäntö sijoittaa nämä URL-osoitteet muuttujiin 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ää lisätä 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 antaaksesi sille selkeän kuvauksen:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>Tässä on jotain hyvin metatasoista.
Globaali origins-taulukko ja useat komponenttikohtaiset originit
Tämä malli toimii vain, kun käytetään Next.js Pages Router.
Isommissa sovelluksissa on hyödyllistä jakaa merkkijonot ja käännökset useampiin, pienempiin origin‑lähteisiin. Tämä lähestymistapa auttaa pienentämään pakettikokoja ja siirtoaikoja, mikä varmistaa tehokkaan ja skaalautuvan lokalisoinnin.
Vaikka tämä on suoraviivaista, kun renderointi tapahtuu vain asiakaspuolella, originien hallinnasta tulee nopeasti monimutkaista, kun käännöksiä haetaan palvelinpuolen renderointia varten. Voit kuitenkin automatisoida originien hallinnan käyttämällä TacoTranslate-asiakasohjelman origins taulukkoa.
Tarkastellaan esimerkkiä, jossa olemme jakaneet komponentit ja sivut 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 palvelinpuolen renderöinnin esimerkit saadaksesi lisätietoja getTacoTranslateStaticProps.