Doiciméadú: Cleachtais is Fearr

Cleachtais is fearr

Irish

Cuir URLanna i athróga

Nuair a aistrítear téacsanna a bhfuil URLanna nó sonraí cosúil leo iontu, is dea-chleachtas na URLanna sin a stóráil 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'}}
/>

Nuair atá 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 eolas tuairisciúil a sholáthar faoi cad a dhéanann 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 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

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

Nuair a bhíonn tú ag obair le feidhmchláir níos mó, tá sé úsáideach téacsanna agus aistriúcháin a roinnt i bhfoinsí níos lú. Cuidíonn an cur chuige seo le méid na bpacáistí agus amanna tarchuir a laghdú, ag cinntiú áitiúcháin éifeachtúla agus inscálaithe.

Cé go bhfuil sé seo simplí nuair a bhíonn tú ag rindreáil ar thaobh an chliaint amháin, éiríonn bainistiú na bhfoinsí go tapa casta nuair a bhíonn tú ag fáil aistriúchán le haghaidh rindreála 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, ina bhfuilimid ár gcomhpháirteanna agus ár leathanaigh scartha i gcomhaid ar leithligh.

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 taobh an fhreastalaí chun tuilleadh eolais a fháil faoi getTacoTranslateStaticProps.

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

Cleachtais is fearr

Úsáid lipéid ARIA

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