Beste praktyke
Sit URL's in veranderlikes
Wanneer u stringe vertaal wat URL's of soortgelyke data bevat, is dit 'n goeie praktyk om hierdie URL's in veranderlikes te plaas en daarna na hulle in u sjablone te verwys.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>Gebruik ARIA-labels
Wanneer u die teks van interaktiewe elemente soos knoppies vertaal, is dit belangrik om ARIA-etikette in te sluit om toeganklikheid te verseker. ARIA-etikette help skermslesers om beskrywende inligting oor die element se funksie te gee.
Byvoorbeeld, as u 'n knoppie het wat gebruikers toelaat om teks uit 'n kodeblok te kopieer, kan u die aria-label attribuut gebruik om 'n duidelike beskrywing te verskaf:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>Daar is iets hier wat baie meta aanvoel.
Globale oorspronge-array en oorspronge van verskeie komponente
Hierdie patroon werk slegs wanneer die Next.js Pages Router gebruik word.
Wanneer jy met groter toepassings werk, is dit voordelig om stringe en vertalings in verskeie, kleiner oorspronge te verdeel. Hierdie benadering help om bundelgroottes en oordragtye te verminder, en verseker doeltreffende en skaalbare lokalisering.
Alhoewel dit eenvoudig is wanneer daar slegs aan die kliëntkant gerender word, word die bestuur van oorspronge vinnig kompleks wanneer vertalings vir die bedienerkant-rendering opgehaal word. Jy kan egter oorsprongbestuur outomatiseer deur die TacoTranslate-kliënt se origins array te gebruik.
Kyk na hierdie voorbeeld, waar ons ons komponente en bladsye in afsonderlike lêers verdeel het.
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});
}Kyk na ons voorbeelde van bedienerkant-weergawes vir meer inligting oor getTacoTranslateStaticProps.