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

ተሻማሚ ልምዶች

Amharic

URL-ዎችን ወደ ተለዋዋጮች ያቀርቡ

የ URLs ወይም እንደዚሁ ያሉ ውሂቦችን የሚያካትቱ ስትሪንጎችን ሲተርጉሙ፣ እነዚህን URLs ወደ ተለዋዋጮች ውስጥ መግባታቸው እና በማንበብ አብነቶቻችሁ ውስጥ መጠቀም ጥሩ ልምድ እንደሆነ ይቈጠራል።

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

የተጠቃሚ ግንኙነት እንደ አዝራሮች ያሉ እቃዎችን ሲተርጉሙ ለመደሰት ARIA ምልክቶችን መካተት አስፈላጊ ነው። ARIA ምልክቶች ለማያያዥ አንባሳት ስለእቃው ተግባር ገምጋም መስጠት ይረዳሉ።

ለምሳሌ፣ ከኮድ ክፍል ጽሑፍ ለመቅዳት ተጠቃሚዎችን የሚያስችል አዝራር ካለዎት እንደ 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 መለያዎችን አጠቃቀም ያድርጉ

ዓለም አቀፍ ምንጮች ተስተናጋጅ እና ብዙ ክፍል ምንጮች