ሰነድ: ምርጥ ተግባራት

ምርጥ አሰራሮች

Amharic

URL-ዎችን በተለዋዋጮች ውስጥ ያቅርቡ

URL ወይም ከፍተኛ ያሉ ውሂቦችን የሚያካትቱ ስርአቶችን ሲተረጉሙ፣ እነዚህን URL በተለያዩ ተባባሪዎች ውስጥ መቀመጥና በከፊል ቅጥዎቻችሁ ውስጥ መጠቀም ጥሩ ልምድ ተብሏል።

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

የተጠቃሚ ንጥሎች የሚሰሩ ንጥሎችን እንደ ቁልፍ ሲተርጉሙ፣ ለማሳሰቢያነት የARIA መለያዎችን መጨመር አስፈላጊ ነው። የARIA መለያዎች ስክሪን አንተኛዎች ስለ ንጥሉ ያለውን ተጠቃሚ መግለጫ ለማቅረብ እንደሚረዱ አገልግሎት ይሰጣሉ።

ለምሳሌ፣ ከኮድ ክፍል ጽሑፍ ለማቅዳት በተጠቃሚዎች የሚፈቅድ ቁልፍ ካለዎት በኩራት የclear መግለጫ ለማቅረብ aria-label ገበታ ማጠቀም ትችላለህ፡፡

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

ይህ ስለ እነዚህ ነገሮች በጣም ሜታ ይሰማል።

አለም አቀፍ ምንጮች አውድ እና ብዙ ኮምፖነንት ምንጮች

ይህ አቅጣጫ በ Next.js Pages Router ብቻ ሲጠቀም ብቻ እንደሚሰራ ነው።

በትልቅ መተግበሪያዎች ስራ ላይ ሳሉ፣ የቃላትን እና ትርጉሞችን ወደ ብዙ እና ትንሽ ምንጮች ማካፈል ጥሩ ነው። እነዚህ ዘዴዎች የፋይል መጠንን እና የማስተላለፊያ ጊዜዎችን መቀነስ እንዲረዱ ያስችላሉ፣ ይህም በተስተናጋጅነት እና በመስፈርት የሚሰራ እና የሚቀጥለው አካባቢን ያረጋግጣል።

ይህ በተሞክሮ በእንግዲኛ ክፍል ሲቀረብ ቀላል ነው፣ ነገር ግን ለመሰረታዊ መስክ ትርጉሞች ሲወሰዱ ምንጮችን ማስተዳደር በፍጥነት የተወሰነ የችግር ሂደት ሆኖ ይታያል። ሆኖም፣ በ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 መለያዎችን ይጠቀሙ

አለም አቀፍ ምንጮች አውድ እና ብዙ ኮምፖነንት ምንጮች