Parhaat käytännöt
Laita URL-osoitteet muuttujiin
Kun käännät merkkijonoja, jotka sisältävät URL-osoitteita tai vastaavia tietoja, on hyvä käytäntö sijoittaa 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-tunnisteita
Kun käännät interaktiivisten elementtien, kuten painikkeiden, tekstejä, on tärkeää sisällyttää ARIA-tunnisteita 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 selkeän kuvauksen:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>Tässä on jotain todella metaista.
Globaali alkuperätaulukko ja useiden komponenttien alkuperät
Tämä malli toimii vain, kun käytetään Next.js Pages Router.
Suurempien sovellusten kohdalla on hyödyllistä jakaa merkkijonot ja käännökset useisiin, pienempiin lähteisiin. Tämä lähestymistapa auttaa pienentämään pakettien kokoa ja siirtoaikoja, varmistaen tehokkaan ja skaalautuvan lokalisaation.
Kun renderöinti tapahtuu vain asiakaspuolella, tämä on suoraviivaista, mutta käännösten hakeminen palvelinpuolen renderöintiä varten tekee lähteiden hallinnasta nopeasti monimutkaista. Voit kuitenkin automatisoida lähteiden hallinnan käyttämällä TacoTranslate-asiakkaan origins -taulukkoa.
Tarkastellaan tätä esimerkkiä, jossa olemme erotelleet 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 palvelinpuolen renderöinnin esimerkit saadaksesi lisätietoja getTacoTranslateStaticProps.