ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
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 ಅನ್ನು ಬಳಸುವಾಗ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
ದೊಡ್ಡ ಅನ್ವಯಿಕೆಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಸ್ಟ್ರಿಂಗ್ಗಳು ಮತ್ತು ಅನುವಾದಗಳನ್ನು ಹಲವಾರು, ಚಿಕ್ಕ ಮೂಲಗಳಾಗಿ ವಿಭಜಿಸುವುದು ಲಾಭದಾಯಕ. ಈ ವಿಧಾನವು ಬಂಡಲ್ ಗಾತ್ರ ಮತ್ತು ವರ್ಗಾವಣಾ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಿ, ಪರಿಣಾಮಕಾರಿ ಹಾಗೂ ವಿಸ್ತರಿಸಬಹುದಾದ ಸ್ಥಳೀಯಕರಣವನ್ನು ಖಚಿತಗೊಳಿಸುತ್ತದೆ.
ಇದು ಕೇವಲ ಕ್ಲೈಯಂಟ್ ಸೈಡ್ನಲ್ಲಿ ರೆಂಡರ್ ಮಾಡುವಾಗ ಸರಳವಾಗಿದ್ದರೂ, ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗಿಗಾಗಿ ಅನುವಾದಗಳನ್ನು ಪಡೆಯುವಾಗ ಮೂಲಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ತ್ವರಿತವಾಗಿ ಸಂಕೀರ್ಣವಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, TacoTranslate ಕ್ಲೈಯಂಟ್ನ origins
ಸರಣಿ ಬಳಸಿ ನೀವು ಮೂಲ ನಿರ್ವಹಣೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಬಹುದು.
ನಾವು ನಮ್ಮ ಕಾಂಪೊನೆಂಟ್ಗಳು ಮತ್ತು ಪುಟಗಳನ್ನು ಬೇರೆ ಫೈಲ್ಗಳಲ್ಲಿ ಬೇರ್ಪಡಿಸಿದ್ದೇವೆ ಎಂಬ ಈ ಉದಾಹರಣೆಯನ್ನು ಪರಿಗಣಿಸಿ.
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>
);
}
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
ಕುರಿತು ನಮ್ಮ ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡಿ.