Cleachtais is fearr
Bain úsáid as athróga do URLanna.
Nuair a bhíonn tú ag aistriú sraitheanna a bhfuil URLanna nó sonraí cosúil leo iontu, meastar gur dea-chleachtas iad na URLanna seo a chur i n-athróga agus ansin tagairt a dhéanamh dóibh laistigh de do shablónna.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>Úsáid lipéid ARIA
Nuair a bhíonn tú ag aistriú téacs eilimintí idirghníomhacha cosúil le cnaipí, tá sé tábhachtach lipéid ARIA a áireamh chun inrochtaineacht a chinntiú. Cabhraíonn lipéid ARIA le léitheoirí scáileáin cur síos a thabhairt ar fheidhm na heilimint.
Mar shampla, má tá cnaipe agat a ligeann d’úsáideoirí téacs a chóipeáil ó bhloic chód, is féidir leat an tréith aria-label a úsáid chun cur síos soiléir a thabhairt:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>Tá rud éigin faoi seo an-mheata.
Eagar foinsí domhanda agus foinsí comhpháirte iolracha
Oibríonn an patrún seo ach amháin nuair a úsáidtear Next.js Pages Router.
Nuair a bhíonn tú ag obair le feidhmchláir níos mó, tá sé tairbheach téacsanna agus aistriúcháin a roinnt i roinnt foinsí níos lú. Cuireann an cur chuige seo le laghdú ar mhéideanna pacáistithe agus ar amanna aistrithe, ag cinntiú áitiúcháin éifeachtúla agus inscálaithe.
Cé go mbíonn sé simplí seo nuair atá tú ag rindreáil ar thaobh an chliaint amháin, éiríonn bainistíocht fhoinsí go tapa casta nuair a bhíonn tú ag iarraidh aistriúcháin le haghaidh rindreáil ar thaobh an fhreastalaí. Mar sin féin, is féidir leat bainistíocht fhoinsí a uathoibriú trí úsáid a bhaint as an eagar origins sa chliaint TacoTranslate.
Smaoinigh ar an sampla seo, áit a bhfuil ár gcomhpháirteanna agus ár leathanaigh scartha isteach i gcomhaid ar leith.
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});
}Féach ar ár samplaí rindreála ar an taobh freastalaí chun tuilleadh eolais a fháil faoi getTacoTranslateStaticProps.