Doiciméadú: Na cleachtais is fearr

Cleachtais is fearr

Irish

Cuir URLanna i athróga

Nuair a bhíonn tú ag aistriú sreanga a bhfuil URLanna nó sonraí den chineál céanna iontu, meastar gur dea-chleachtas na URLanna seo a chur i athróga agus ansin tagairt a dhéanamh dóibh laistigh de do theimpléid.

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

Úsáid lipéid ARIA

Nuair a aistríonn tú téacs eilimintí idirghníomhacha ar nós cnaipí, tá sé tábhachtach lipéid ARIA a chur san áireamh chun inacmhainneacht a chinntiú. Cuidíonn lipéid ARIA le léitheoirí scáileáin eolas cur síosach a sholáthar faoin bhfeidhm atá ag an eilimint.

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

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

Mothaíonn rud éigin faoi seo go bhfuil sé an-mheata.

Eagar bunúsanna domhanda agus bunúsanna iolracha do chomhpháirteanna

Oibríonn an patrún seo ach amháin nuair a bhíonn tú ag úsáid an Next.js Pages Router.

Nuair atá tú ag obair le hiarratais níos mó, bíonn sé tairbheach stringí agus aistriúcháin a roinnt i bhfoinsí níos lú. Cabhraíonn an cur chuige seo le laghdú ar mhéideanna pacáistí agus ar amanna aistrithe, ag cinntiú áitiúcháin éifeachtúla agus inscálaithe.

Cé go bhfuil sé seo éasca nuair a bhíonn an léiriú á dhéanamh ar thaobh an chliaint amháin, éiríonn bainistiú fhoinsí go tapa níos casta nuair atá tú ag fáil aistriúchán don léiriú ar thaobh an fhreastalaí. Mar sin féin, is féidir leat bainistiú fhoinsí a uathoibriú trí úsáid a bhaint as an eagar origins den chliant TacoTranslate.

Smaoinigh ar an sampla seo, áit ar scaramar ár gcomhpháirteanna agus ár leathanaigh 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í rindreála ar an taobh freastalaí le haghaidh tuilleadh eolais faoi getTacoTranslateStaticProps.

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