Doiciméadú: Cleachtais is Fearr

Cleachtais is fearr

Irish

Cuir URLanna i n-athróga

Nuair a bhíonn tú ag aistriú sreangáin a bhfuil URLanna nó sonraí cosúil leo iontu, mheastar gur dea-chleachtas na URLanna sin 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 bhíonn tú ag aistriú téacs eilimintí idirghníomhacha, mar chnaipí, 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 shoiléir a thabhairt faoi fheidhm an eilimint.

Mar shampla, má tá cnaipe agat a ligeann 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"
/>

Tá rud éigin an-mheata faoi seo.

Eagar foinsí domhanda agus iliomad foinsí comhpháirte

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

Nuair a oibríonn tú le feidhmchláir níos mó, tá sé buntáisteach téacsanna agus aistriúcháin a roinnt i go leor fhoinsí níos lú. Cuireann an cur chuige seo le laghdú ar mhéideanna pacáistí agus ar amanna tarchuir, ag cinntiú áitiúcháin éifeachtúla agus inscálaithe.

Cé go bhfuil sé seo sách simplí nuair a bhíonn an léiriú ar thaobh an chliaint amháin, éiríonn bainistiú na bhfoinsí go tapa casta nuair a bhíonn tú ag fáil aistriúcháin le haghaidh léiriúcháin ar thaobh an fhreastalaí. Mar sin 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 roinn muid ár gcomhpháirteanna agus ár leathanaigh isteach 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í faoi rindreáil ar an taobh freastalaí chun tuilleadh eolais a fháil faoi getTacoTranslateStaticProps.

Láimhseáil Earráidí agus Dífhabhtú