غوره ترسره کولو طریقې
URLs په متغیرونو کې کېږدئ
کله چې د هغو تارونو ژباړه کوئ چې URLs یا ورته معلومات لري، دا د ښه عمل ګڼل کیږي چې دغه URLs په متغیرونو کې ځای پر ځای کړئ او بیا یې په خپلو ټیمپلیټونو کې حواله کړئ.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>
د ARIA لیبلونه وکاروئ
کله چې د تڼیو په څیر د تعاملي عناصرو متن وژباړئ، دا مهمه ده چې د لاسرسي ډاډ ورکولو لپاره د ARIA لیبلونه شامل کړئ. د ARIA لیبلونه د سکرین لوستونکو سره مرسته کوي ترڅو د عنصر د دندې په اړه توضیح کونکې معلومات وړاندې کړي.
د بېلګې په توګه، که تاسو داسې تڼۍ لرئ چې کاروونکو ته اجازه ورکوي له کوډ بلاک څخه متن کاپي کړي، تاسو کولی شئ د aria-label
ځانګړتیا وکاروئ ترڅو روښانه تشریح وړاندې کړئ:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>
په دې کې یو څه ډیر میټا احساس کیږي.
د نړیوالو سرچینو آرایه او د څو برخو سرچینې
دا نمونې یوازې هغه وخت کار کوي کله چې د Next.js Pages Router څخه کار واخیستل شي.
کله چې د لویو غوښتنلیکونو سره کار کوئ، دا ګټور وي چې لړې او ژباړې په څو کوچنیو سرچینو وېشئ. دا طریقه د بستهبندۍ حجمونه او د لیږد وختونه کموي، چې د مؤثر او قابل توسع ځایي کولو ډاډ ورکوي.
که څه هم دا کار یوازې په کلاینت اړخ کې رېنډر کولو پر مهال ساده دی، د سرچینو مدیریت په چټکۍ سره پېچلی کېږي کله چې د سرور اړخ رېنډر لپاره ژباړې ترلاسه کوئ. خو تاسو کولای شئ د TacoTranslate کلاینت origins
ارې کارولو سره د سرچینو مدیریت اتومات کړئ.
دا مثال په پام کې ونیسئ، چېرې چې موږ خپل برخې او مخونه په جلا فایلونو کې وېشلي دي.
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});
}
زموږ د نورو معلوماتو لپاره د getTacoTranslateStaticProps
په اړه کتلای شئ د سرور-خوا ښودنې مثالونه.