ሰነድ: ምርጥ ልምዶች

ምርጥ ልምዶች

Amharic

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

URL ወይም እንደዚህ ያሉ መረጃዎችን ያካትቱ ጽሁፎችን ሲተረጉሙ፣ እነዚህን የURL አድራሻዎች ወደ ተለዋዋጮች ውስጥ ማውሰድና ከዚያም በቅርጸ አቀማመጦቻችሁ ውስጥ መጠቀም ጥሩ ልምድ ነው።

<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 ጋር ብቻ ስለሚሰራ ነው።

በትልቅ መጠን ያሉ መተግበሪያዎች ላይ ሲሰሩ፣ የጽሑፍ ሐረጎችና ትርጉሞችን ወደ ብዙ ንዑስ እና ትንሽ ምንጮች መከፋፈል ጥቅም አለው። ይህ አቅጣጫ የባንድል መጠንንና የማስተላለፊያ ጊዜን ይቀንሳል፣ እንዲሁም ተገቢና የሚያስፋፋ አካባቢ ለማቋቋም ይረዳል።

ይህ በክላይንት ገጽ (client side) ብቻ ሲሰራ ቀላል ነው፤ ነገር ግን ለ server-side rendering ትርጉሞችን ሲያስመጡ የምንጮችን አስተዳደር ፈጣን ይወድዳል እና የተወሰነ ካልሆነ ይወጋል። ነገር ግን፣ በTacoTranslate client 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 መለያዎችን ይጠቀሙ

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