Geriausios praktikos
Įdėkite URL į kintamuosius
Kai verčiami tekstai, kuriuose yra URL ar panašių duomenų, laikoma gera praktika šiuos URL įdėti į kintamuosius ir tada juos nurodyti savo šablonuose.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>
Naudokite ARIA etiketes
Verčiant interaktyvių elementų, tokių kaip mygtukai, tekstą, svarbu įtraukti ARIA etiketes, kad būtų užtikrintas prieinamumas. ARIA etiketės padeda ekrano skaitytuvams pateikti aprašomąją informaciją apie elemento funkciją.
Pavyzdžiui, jei turite mygtuką, leidžiantį vartotojams kopijuoti 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"
/>
Kažkas šiame atrodo labai meta.
Globalus šaltinių masyvas ir keli komponentų šaltiniai
Šis modelis veikia tik naudojant Next.js Pages Router.
Dirbant su didesnėmis programėlėmis, naudinga padalinti tekstus ir vertimus į kelis mažesnius origins. Šis požiūris padeda sumažinti paketo dydį ir perdavimo laiką, užtikrinant efektyvų ir skalūojamą lokalizavimą.
Nors tai paprasta atliekant renderiavimą tik kliento pusėje, valdyti origins tampa sudėtinga, kai vertimus reikia gauti serverio pusės renderiavimui. Vis dėlto galite automatizuoti origins valdymą naudodami TacoTranslate kliento origins
masyvą.
Apsvarstykite šį pavyzdį, kuriame mūsų komponentai ir puslapiai yra atskirti į 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});
}
Žr. mūsų serverinio puslapio atvaizdavimo pavyzdžius norėdami sužinoti daugiau apie getTacoTranslateStaticProps
.