Mafi kyawun hanyoyi
Sanya adireshin yanar gizo a cikin masu canji
Lokacin fassara rubutu da ke ɗauke da URLs ko makamantan bayanai, ana ɗaukar cewa yana da kyau a sanya waɗannan URLs a cikin canje-canje sannan a yi amfani da 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 haɗa alamomin ARIA don tabbatar da samun damar amfani. Alamomin ARIA suna taimakawa masu karanta allo su ba da bayanin kwatanci game da aikin abin.
Alal misali, idan kuna da maɓalli wanda ke ba masu amfani damar kwafa rubutu daga wani sashin lamba, za ku iya amfani da aria-label don ba da cikakken bayani:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>Wani abu game da wannan ya yi matuƙar 'meta'.
Jerin asalai na duniya da asalai na sassa masu 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 rubutun da fassaloli zuwa asali da yawa, ƙanana. Wannan hanyar tana taimakawa rage girman kunshi da lokutan watsa bayanai, tana tabbatar da fassara mai inganci kuma mai iya faɗaɗawa.
Yayin da wannan yake da sauƙi lokacin yin rendering ne kawai a ɓangaren abokin ciniki, sarrafa asali na iya zama rikitarwa da sauri lokacin da ake ɗaukar fassaloli don rendering a ɓangaren uwar garke. Duk da haka, za ka iya sarrafa asali ta atomatik ta amfani da jerin origins na abokin ciniki na TacoTranslate.
Yi la'akari da wannan misali, inda muka raba abubuwanmu (components) 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 server-side rendering ɗinmu don ƙarin bayani game da getTacoTranslateStaticProps.