ഡോക്യുമെന്റേഷൻ: മികച്ച പ്രാക്ടീസുകൾ

മികച്ച പ്രയോഗങ്ങൾ

Malayalam

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

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

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

ARIA ലേബലുകൾ ഉപയോഗിക്കുക

ഇടപെടൽ സാദ്ധ്യതയുള്ള ബട്ടണുകൾ പോലുള്ള ഇനങ്ങളിലെ പാഠം തർജ്ജമ ചെയ്യുമ്പോൾ, ആക്സസിബിലിറ്റിക്ക് ഉറപ്പ് നൽകാൻ ARIA ലേബലുകൾ ഉൾപ്പെടുത്തുന്നത് مهمമാണ്. ARIA ലേബലുകൾ സ്ക്രീൻ റീറ്ററുകൾക്ക് ആ ഇനത്തിന്റെ പ്രവർത്തനത്തിന് സംബന്ധിച്ച് വിശദമായ വിവരങ്ങൾ നൽകാൻ സഹായിക്കുന്നു.

ഉദാഹരണത്തിന്, കോഡ് ബ്ലോക്കിൽ നിന്നുള്ള പാഠം ഉപയോക്താക്കൾക്ക് പകർത്താൻ അനുവദിക്കുന്ന ഒരു ബട്ടൺ ഉണ്ടെങ്കിൽ, നിങ്ങൾക്ക് aria-label ഗുണം ഉപയോഗിച്ച് ഒരു വ്യക്തമായ വിവരണം നൽകാം:

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

ഇതിന് കുറിച്ച് എന്തോ വളരെ മെറ്റാ അനുഭവപ്പെടുന്നു.

ഗ്ലോബൽ ഓരിജിൻസ് അറേയും ബഹുഭാഗ സമാഹാരം origins

ഈ പാറ്റേൺ yalnızca Next.js Pages Router ഉപയോഗിക്കുമ്പോഴാണ് പ്രവർത്തിക്കുന്നത്.

വലുതായ അപ്ലിക്കേഷനുകളിൽ ജോലി ചെയ്യുമ്പോൾ, സ്ട്രിംഗുകളും പരിഭാഷകളും നിരവധി ചെറുകിട ഉറവിടങ്ങളായി വിഭജിക്കുന്നത് ഗുണകരമാണ്. ഈ സമീപനം ബUNDLE വലിപ്പങ്ങളും ട്രാൻസ്ഫർ സമയവും കുറയ്ക്കാൻ സഹായിക്കുന്നതിനാൽ കാര്യക്ഷമവും സ്കാലബിൾ ആയ ലൊക്കലൈസേഷൻ ഉറപ്പാക്കുന്നു.

ക്ലയന്റ് സൈഡിൽ മാത്രമായുള്ള റെൻഡറിങ്ങിൽ ഇത് നേരിട്ടുള്ള എങ്കിലും, സെർവർ-സൈഡ് റെൻഡറിംഗിന് വേണ്ടി പരിഭാഷകൾ എടുക്കുമ്പോൾ ഉറവിടങ്ങൾ മാനേജുചെയ്യുന്നത് വേഗത്തിൽ സങ്കീർണമായി മാറുന്നു. എന്നിരുന്നാലും, 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 സംബന്ധിച്ച കൂടുതൽ വിവരങ്ങൾക്ക്.

പിഴവ് കൈകാര്യം ചെയ്യലും ഡീബഗിംഗും