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