Hababka ugu wanaagsan
Ku dheji URL-yada beddelayaasha
Marka la turjumayo xarfo ay ku jiraan URL-yada ama xog la mid ah, waxaa loo arkaa hab wanaagsan in URL-yadan lagu kaydiyo beddelayaal kadibna lagu tixraaco shaxdaada template-ka gudaheeda.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>
Isticmaal summadaha ARIA
Marka la turjumayo qoraalka walxaha is-dhexgalka sida badhamada, waxaa muhiim ah in la isticmaalo summadaha ARIA si loo hubiyo helitaanka. Summadaha ARIA waxay ka caawiyaan akhristayaasha shaashadda inay bixiyaan macluumaad faahfaahsan oo ku saabsan shaqada walxaha.
Tusaale ahaan, haddii aad leedahay badhan u oggolaanaya isticmaalayaasha inay nuqul ka sameeyaan qoraalka qayb koodhka ah, waxaad isticmaali kartaa astaanta aria-label
si aad u bixiso sharaxaad cad:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>
Wax ayaa arrintan ka dhigaya mid aad u meta ah.
Array-ga asal ahaan caalami ah iyo ilo badan oo qaybaha ah
Qaab-dhismeedkan wuxuu shaqeeyaa oo keliya marka la adeegsanayo Next.js Pages Router.
Marka la shaqeynayo codsiyo waaweyn, waxaa faa’iido leh in xarafka iyo turjumaadaha loo qaybiyo ilo yar yar oo badan. Habkani wuxuu caawiyaa yaraynta cabbirka faylasha iyo wakhtiyada gudbinta, isagoo xaqiijinaya turjumid hufan oo la ballaaran karo.
Inkastoo tani ay fududahay marka la soo bandhigayo kaliya dhinaca macaamilka, maaraynta ilaha si degdeg ah ayay u adkaanaysaa marka la soo qaadayo turjumaadaha dhinaca server-ka. Si kastaba ha noqotee, waxaad si otomaatig ah u maamuli kartaa ilaha adigoo isticmaalaya array-ga macmiilka TacoTranslate origins
.
Tusaalahan fiiri, halkaas oo aan ku kala qaybinnay qaybaha iyo bogagii faylal gooni ah.
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});
}
Eeg tusaalooyinka server-side rendering wixii macluumaad dheeraad ah oo ku saabsan getTacoTranslateStaticProps
.