Geriausios praktikos
Įdėkite URL adresus į kintamuosius
Verčiant eilutes, kuriose yra URL arba panašių duomenų, laikoma gera praktika talpinti šiuos URL į kintamuosius ir tuomet juos naudoti savo šablonuose.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>
Naudokite ARIA etiketes
Verčiant interaktyvių elementų, pvz., mygtukų, tekstą, svarbu įtraukti ARIA etiketes, kad būtų užtikrintas prieinamumas. ARIA etiketės padeda ekrano skaitytuvams pateikti aiškų aprašymą apie elemento funkciją.
Pavyzdžiui, jei turite mygtuką, leidžiantį vartotojams nukopijuoti tekstą iš kodo bloko, galite naudoti aria-label
atributą, kad pateiktumėte aiškų aprašymą:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>
Tai kažkaip atrodo labai meta.
Globalus originų masyvas ir keli komponentų originai
Šis šablonas veikia tik naudojant Next.js Pages Router.
Dirbant su didesnėmis programomis, naudinga suskirstyti eilutes ir vertimus į kelis mažesnius šaltinius. Šis požiūris padeda sumažinti paketų dydžius ir perdavimo laiką, užtikrinant efektyvų ir plečiamą lokalizavimą.
Nors tai paprasta, kai atvaizdavimas vyksta tik kliento pusėje, šaltinių valdymas greitai tampa sudėtingas, kai reikia gauti vertimus serverio pusės atvaizdavimui. Tačiau galite automatizuoti šaltinių valdymą naudodami TacoTranslate kliento origins
masyvą.
Apsvarstykite šį pavyzdį, kuriame komponentai ir puslapiai yra paskirstyti į atskirus failus.
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});
}
Peržiūrėkite mūsų serverio pusės atvaizdavimo pavyzdžius, kad sužinotumėte daugiau apie getTacoTranslateStaticProps
.