Pi bon pratik
Mete URL yo nan varyab
Lè w ap tradui chenn ki gen URL oswa done ki sanble, li bon pratik pou mete URL sa yo nan varyab epi fè referans a yo nan modèl ou yo.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>
Sèvi ak etikèt ARIA
Lè w ap tradui tèks eleman entèaktif tankou bouton yo, li enpòtan pou enkli etikèt ARIA pou asire aksè. Etikèt ARIA ede lektè ekran yo bay enfòmasyon deskriptif sou fonksyon eleman an.
Pa egzanp, si ou gen yon bouton ki pèmèt itilizatè yo kopye tèks soti nan yon blòk kòd, ou ka itilize atribit aria-label
la pou bay yon deskripsyon klè:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>
Gen yon bagay sou sa ki fè li santi l vrèman meta.
Aray orijin global yo ak plizyè orijin konpozan
Modèl sa a mache sèlman lè w ap itilize Next.js Pages Router.
Lè w ap travay sou aplikasyon ki pi gwo, li itil pou divize chenn tèks yo ak tradiksyon yo an plizyè orijin pi piti. Apwòch sa a ede diminye gwosè pake yo ak tan transfè yo, asire yon lokalizasyon efikas ak ki fasil pou elaji.
Pandan ke sa senp lè w ap rann sèlman sou bò kliyan an, jere orijin yo vin konplike vit lè w ap rekipere tradiksyon pou rann sou bò sèvè a. Sepandan, ou ka otomatize jesyon orijin yo lè w itilize tablo origins
nan kliyan TacoTranslate.
Konsidere egzanp sa a, kote nou te separe konpozan yo ak paj yo nan dosye apa.
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});
}
Gade egzanp nou yo sou rann sou bò sèvè pou plis enfòmasyon sou getTacoTranslateStaticProps
.