Parhaat käytännöt
Laita URL-osoitteet muuttujiksi
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 sitten 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, tekstiä, on tärkeää sisällyttää ARIA-tunnisteet saavutettavuuden varmistamiseksi. ARIA-tunnisteet auttavat ruudunlukijoita tarjoamaan kuvailevaa tietoa elementin toiminnasta.
Esimerkiksi, jos sinulla on painike, jolla käyttäjät voivat kopioida tekstiä koodilohkosta, voit käyttää aria-label -attribuuttia antaa selkeän kuvauksen:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>Jostain tässä tunnelmassa on jotain hyvin meta.
Globaali origins-taulukko ja useat komponenttien originsit
Tämä malli toimii vain käytettäessä Next.js Pages Router:ia.
Kun työskennellään suurempien sovellusten kanssa, on hyödyllistä jakaa merkkijonot ja käännökset useisiin pienempiin alkuperiin. Tämä lähestymistapa auttaa vähentämään pakettien kokoa ja siirtoaikoja, varmistaen tehokkaan ja skaalautuvan lokalisoinnin.
Vaikka tämä on suoraviivaista pelkästään asiakaspuolen renderöinnissä, alkuperien hallinnasta tulee nopeasti monimutkaista, kun haetaan käännöksiä palvelinpuolen renderöintiin. Voit kuitenkin automatisoida alkuperien hallinnan käyttämällä TacoTranslate-asiakkaan origins taulukkoa.
Otetaanpa tämä esimerkki, jossa olemme eriyttäneet 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öintiesimerkeistämme.