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

ምርጥ ልምዶች

Amharic

URL-ዎችን በተለዋዋጮች ውስጥ አስገባ

URL ወይም ተመሳሳይ ዳታ የሚያካትቱ የጽሑፍ ሐረጎችን ሲተረጉሙ፣ እነዚህን URL-ዎች ወደ ተለዋዋጮች ውስጥ ማቀመጥና በቴምፕሌቶቻችሁ ውስጥ ማጠቀም የተመረጠ መልካም ልምድ ነው።

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

እንደ አዝራሮች (buttons) ያሉ የተገናኝ ንጥሎች ጽሑፎችን ሲተርጉሙ፣ ለእንክብካቤ መዳረሻ (accessibility) መረጃ ለማቅረብ 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 ሌብሎችን ይጠቀሙ

የአጠቃላይ መነሻ ምንጮች ዝርዝር እና የብዙ ኮምፖነንቶች መነሻዎች