ഡോക്യുമെന്റേഷൻ: മികച്ച പ്രവർത്തനരീതികൾ

മികച്ച രീതികൾ

Malayalam

URL-കൾ വേരിയബിളുകളിൽ വെക്കുക

URL-കളോ സമാന ഡാറ്റയോ അടങ്ങിയ സ്ട്രിംഗുകൾ വിവർത്തനം ചെയ്യുമ്പോൾ, ഈ URL-കൾ വേരിയബിളുകളിലാക്കി സൂക്ഷിച്ച് പിന്നീട് നിങ്ങളുടെ ടെംപ്ലേറ്റുകളിൽ അവയെ റഫറൻസ് ചെയ്യുന്നത് നല്ല പ്രായോഗിക രീതി ആണ്.

<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 ലേബലുകൾ ഉപയോഗിക്കുക

ആഗോള ഉറവുകളുടെ അറേയും പല ഘടകങ്ങളുടെ ഉറവുകളും