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

ምርጥ ልምዶች

Amharic

URL-ዎችን በተለዋዋጮች ውስጥ ያስቀምጡ

URL ወይም እንደዚህ ያሉ ውሂቦችን የሚያካትቱ ስትሪንግዎችን ሲተረጉሙ፣ እነዚህን ዩአርኤሎች ወደ ተለዋዋጮች ውስጥ ማስቀመጥና ከዚያ በኋላ በአቀራረቦቻችሁ ውስጥ ማጠቀም የተመከረ ልምድ ነው።

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

ተገናኝ ንጥሎች (ለምሳሌ ቡተኖች) የጽሑፍን ሲተረጉሙ ለሁሉም እንዲደርስ የARIA መለያዎችን መካተት አስፈላጊ ነው፤ እነዚህ መለያዎች ስክሪን ንባቢዎች (screen readers) ለንጥሉ ስራ ገለጻዊ መረጃ ለማቅረብ ይረዳሉ።

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

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

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

የዓለም አቀፍ መነሻዎች ዝርዝር እና ብዙ ኮምፖነንት መነሻዎች

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

በትልቅ መተግበሪያዎች ላይ ሲሰሩ፣ ስትሪንግዎችንና ትርጉሞችን ወደ ብዙ ትንሽ ምንጮች ማካፈል ጠቃሚ ነው። ይህ መንገድ የባንድል መጠንንና የማስተላለፊያ ጊዜያትን ያነሳል፣ እና በትክክለኛነት እና ሊበዛ የሚችል ሎካላይዘሽን ይደርሳል።

ይህ ነገር በክላይንት ብቻ ሲያቀርብ ቀላል ነው፣ ነገር ግን ለሰርቨር-በላይ ማቅረብ (server-side rendering) ትርጉሞችን ሲያስመጡ ምንጮችን መቆጣጠር በፍጥነት ውስብስብ ይሆናል። ነገር ግን በTacoTranslate ደንበኛ origins ዝርዝርን በመጠቀም የምንጮች አስተዳደርን ማሽነት ማድረግ ይቻላል።

ለምሳሌ፣ ክፍሎቻችንንና ገጾቻችንን ወደ ተለያዩ ፋይሎች ከፋፈልነው የሚነሱ የምሳሌ ሁኔታዎችን ይመልከቱ።

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 ሌብሎችን ይጠቀሙ

የዓለም አቀፍ መነሻዎች ዝርዝር እና ብዙ ኮምፖነንት መነሻዎች