Mafi kyawun hanyoyi
Sanya URLs a cikin masu canji
Lokacin fassara kirtani da ke ɗauke da URLs ko makamantan bayanai, yana da kyau a adana waɗannan URLs a cikin canje-canje (variables) sannan a ambace su a cikin samfuran ku.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>
Yi amfani da lakabin ARIA
Lokacin fassara rubutun abubuwan hulɗa kamar maɓalli, yana da muhimmanci a ƙara alamomin ARIA don tabbatar da samun damar amfani. Alamomin ARIA na taimaka wa masu karanta allo (screen readers) wajen ba da bayani mai bayyana game da aikin abin.
Alal misali, idan kuna da maɓalli da ke ba masu amfani damar kwafa rubutu daga cikin akwatin lambar, za ku iya amfani da sifa aria-label
don ba da bayani mai kyau:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>
Wani abu game da wannan yana da matuƙar 'meta'.
Jerin tushen duniya da tushen sassa da yawa
Wannan tsarin yana aiki ne kawai lokacin da ake amfani da Next.js Pages Router.
Lokacin aiki da manyan aikace-aikace, yana da amfani a raba rubutu da fassaruwa zuwa asali da yawa, ƙanana. Wannan hanyar na taimakawa rage girman fayilolin tarawa da lokutan canja wuri, yana tabbatar da ingantaccen daidaita harshe wanda za a iya faɗaɗa shi.
Duk da cewa wannan abu ne mai sauƙi idan ana yin rendering a gefen abokin ciniki kawai, sarrafa asali yana saurin rikicewa lokacin da ake ɗauko fassarori don rendering a gefen sabar. Koyaya, za ka iya sarrafa asalin ta atomatik ta amfani da array na TacoTranslate client origins
.
Yi la'akari da wannan misalin, inda muka raba sassa da shafukanmu zuwa fayiloli daban-daban.
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});
}
Duba misalan yin rendering a gefen uwar-garke don ƙarin bayani game da getTacoTranslateStaticProps
.