ದಸ್ತಾವೇಜು: ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಉತ್ತಮ ಆಚಾರಗಳನ್ನು

Kannada

URLಗಳನ್ನು ಚರಗಳಲ್ಲಿ ಇಡಿ

URLಗಳು ಅಥವಾ ಅದರಂತデ이터ಗಳನ್ನು ಒಳಗೊಂಡ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಅನುವಾದಿಸುವಾಗ, ಈ URLಗಳನ್ನು ವೇರಿಯಬಲ್‌ಗಳ ಒಳಗೆ置ುವುದು ಮತ್ತು ನಂತರ ನಿಮ್ಮ ಟೆಂಪ್ಲೇಟ್ಗಳಲ್ಲಿ ಅವುಗಳನ್ನು ಉಲ್ಲೇಖಿಸುವುದರ ಕುರಿತು ಉತ್ತಮ ಅಭ್ಯಾಸವೇನೆಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.

<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"
/>

ಇದರ ಬಗ್ಗೆ ಏನೋ ಬಹಳ ಮೆಟಾ ಅನ್ನಿಸುವುದು.

ಗ್ಲೋಬಲ್ ಮೂಲಗಳ ಸರಣಿ ಮತ್ತು බහු ಘಟಕ ಮೂಲಗಳು

ಈ ಮಾದರಿ Next.js Pages Router ಬಳಸದಿದ್ದಾಗ ಮಾತ್ರ ಕೆಲಸ ಮಾಡುತ್ತದೆ.

ಹೆಚ್ಚು ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನ್ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಸ್ಟ್ರಿಂಗ್ಸ್ ಮತ್ತು ಭಾಷಾಂತರಗಳನ್ನು ಹಲವಾರು, ಚಿಕ್ಕ origins ಗಾಗಿ ವಿಭಜಿಸುವುದು ಲಾಭದಾಯಕವಾಗಿದೆ. ಈ ವಿಧಾನವು ಬ್ಯುಂಡಲ್ ಗಾತ್ರಗಳನ್ನು ಮತ್ತು ವರ್ಗಾವಣೆ ಸಮಯಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿಕೊಂಡು, ಪರಿಣಾಮಕಾರಿಯಾದ ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದಾದ ಸ್ಥಳೀಯೀಕರಣವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಇದು ಕ್ಲೈಂಟ್ ಸೈಡ್‌ನಲ್ಲಿ ಮಾತ್ರ ರೆಂಡರಿಂಗ್ ಮಾಡುವಾಗ ಸ್ಪಷ್ಟವಾಗಿದ್ದರೂ, ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ ಭಾಷಾಂತರಗಳನ್ನು ಪಡೆಯುವಾಗ originsನ್ನು ನಿರ್ವಹಿಸುವುದು ಸತತವಾಗಿ ಜಟಿಲವಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, ನೀವು TacoTranslate ಕ್ಲೈಂಟ್ origins ಅರೇ ಅನ್ನು ಬಳಸಿಕೊಂಡು 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‬ ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ.

ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಡಿಬಗ್ಗಿಂಗ್