Doiciméadú: Cleachtais is Fearr

Cleachtais is fearr

Irish

Cuir URLanna i athróga

Má tá tú ag aistriú téacsanna a bhfuil URLanna nó sonraí dá samhail iontu, mholtar na URLanna sin a chur laistigh de athróga agus ansin tagairt a dhéanamh dóibh i do theimpléid.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

Nuair a bhíonn tú ag aistriú téacs eilimintí idirghníomhacha cosúil le cnaipeanna, tá sé tábhachtach lipéid ARIA a áireamh chun inrochtaineacht a chinntiú. Cabhraíonn lipéid ARIA le léitheoirí scáileáin eolas tuairisciúil a sholáthar faoin bhfeidhm atá ag an eilimint.

Mar shampla, má tá cnaipe agat a ligeann d’úsáideoirí téacs a chóipeáil ó bhloc cód, is féidir leat an aria-label tréith a úsáid chun cur síos soiléir a sholáthar:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

Is cosúil go bhfuil rud éigin meta faoi seo.

Eagar origíní domhanda agus origíní iolracha do chomhpháirteanna

Ní oibríonn an patrún seo ach nuair a úsáidtear an Next.js Pages Router.

Nuair a bhíonn tú ag obair le feidhmchláir níos mó, is buntáiste é sreanganna agus aistriúcháin a roinnt i roinnt fhoinsí níos lú. Cuidíonn an cur chuige seo le méideanna pacáistí agus ama tarchurtha a laghdú, ag cinntiú áitiúcháin éifeachtúla agus inscálaithe.

Cé go bhfuil sé seo simplí nuair a dhéanann tú rindreáil ar thaobh an chliaint amháin, éiríonn bainistiú na bhfoinsí casta go tapa nuair atá tú ag fáil aistriúchán le haghaidh rindreáil ar thaobh an fhreastalaí. Fós féin, is féidir leat bainistiú na bhfoinsí a uathoibriú trí úsáid a bhaint as an eagar origins sa chliant TacoTranslate.

Smaoinigh ar an sampla seo, áit ar scar muid ár gcomhpháirteanna agus ár gcuid leathanach i gcomhaid ar leith.

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});
}

Féach ar ár samplaí maidir le rindreáil ar an bhfreastalaí le haghaidh tuilleadh eolais faoi getTacoTranslateStaticProps.

Láimhseáil earráidí agus dífhabhtú

Cleachtais is fearr

Úsáid lipéid ARIA

Eagar origíní domhanda agus origíní iolracha do chomhpháirteanna