ಡಾಕ್ಯುಮೆಂಟೇಶನ್: ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

Kannada

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 ಲೇಬಲ್ಗಳನ್ನು ಬಳಸಿ

ಜಾಗತಿಕ ಮೂಲಗಳ ಅರೆ ಮತ್ತು ಅನೇಕ ಘಟಕಗಳ ಮೂಲಗಳು