ሰነዶች: ምርጥ ልምዶች

ምርጥ ልምዶች

Amharic

የURL አድራሻዎችን ወደ ተለዋዋጮች ያክሉ

URLs ወይም እንደዚህ ያሉ ውሂቦችን የሚያካትቱ ስትሪንግን ሲተረጉሙ፣ እነዚህን URLs በተለዋዋጮች (variables) ውስጥ ማቅረብና ከዚያም በእቅዶቻችሁ (templates) ውስጥ ማጠቀም ጥሩ ልምድ ተብሎ ይቈጠራል።

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

እንደ አዝራሮች ያሉ የተጫዋቾ ንጥሎችን ሲተረጉሙ፣ የመዳረሻነትን ለማረጋገጥ የARIA መለያዎችን መካተት አስፈላጊ ነው። የARIA መለያዎች ስክሪን ሪደሮች (screen readers) ለንጥሉ ስራ ስለሚያደርገው ግልጽ መግለጫ ማቅረብ ይረዳሉ።

ለምሳሌ፣ ከኮድ ብሎክ ጽሑፍን ለተጠቃሚዎች ለመቅዳት የሚያስችል አዝራር ካለዎት፣ ግልጽ መግለጫ ለማቅረብ aria-label ባህሪ ማጠቀም ይቻላል:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

ይህ ነገር እጅግ ሜታ ይመስላል።

የአለም-አቀፍ ምንጮች ዝርዝር እና ከብዙ ክፍሎች የሚመጡ ምንጮች

ይህ አቅጣጫ ከ Next.js Pages Router ሲጠቀሙ ብቻ ይሰራል.

በትልቅ መተግበሪያዎች ላይ ሲሰሩ፣ ጽሑፎችንና ትርጉሞችን ወደ ብዙ ትንሽ ምንጮች ማካፈል ጠቃሚ ነው። ይህ ዘዴ የባንድል መጠንንና የማውጫ ጊዜን ያነሳል፣ እንዲሁም ጥራታዊና ሊበዛ የሚችለውን አካባቢያዊ ማስተካከያ ያረጋግጣል።

ይህ ነገር ለክላይንት ብቻ ሲታይ ቀላል ነው፣ ነገር ግን ለሰርቨር-በላይ ማቅረብ ትርጉሞችን ሲያገኙ የምንጮችን አስተዳደር በፍጥነት ይውረጃል እና ይወረዳል። ነገር ግን፣ በTacoTranslate ክላይንት origins array በመጠቀም የምንጮችን አስተዳደር ማስተካከል ይቻላል።

እንደ ምሳሌ፣ ኮምፖነንቶቻችንንና ገፆቻችንን ወደ ተለያዩ ፋይሎች ተከፋፈሉ።

components/pricing-table.tsx

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>
	);
}

pages/pricing.tsx

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 ለተጨማሪ መረጃ የእኛን በሰርቨር የሚከናወኑ ምሳሌዎች ይመልከቱ።

የስህተት አስተዳደር እና የስህተት መፈለጊያ

ምርጥ ልምዶች

የ ARIA መለያዎችን ይጠቀሙ

የአለም-አቀፍ ምንጮች ዝርዝር እና ከብዙ ክፍሎች የሚመጡ ምንጮች