Doiciméadú: Cleachtais is Fearr

Cleachtais is fearr

Irish

Cuir URIanna i n-athróga

Nuair atá tú ag aistriú sreanga a chuimsíonn URLanna nó sonraí cosúil leo, measfar gur chleachtas maith iad na URLanna seo a chur i bhfolúntais agus ansin iad a thagairt laistigh d’fhoirmeacha do thrasnán.

<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 rochtain a chinntiú. Cabhraíonn lipéid ARIA le léitheoirí scáileáin faisnéis thuarascála 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 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"
/>

Mothúchán an-mheite atá beagán le sonrú faoi seo.

Raon bhunús domhanda agus iliomad bunús comhlántach

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

Nuair a oibríonn tú le feidhmchláir níos mó, bíonn sé tairbheach na sreanga agus na haistriúcháin a roinnt ina iliomad, níos lú, origins éagsúla. Cabhraíonn an cur chuige seo le méideanna pacáistí agus amanna aistrithe a laghdú, ag cinntiú logánú éifeachtach agus inscálaithe.

Cé go mbíonn sé simplí seo a dhéanamh nuair atá tú ag léiriú ar thaobh an chliaint amháin, bíonn bainistíocht ar na origins go tapa casta nuair atá tú ag fáil aistriúchán le haghaidh léiriúcháin ar thaobh an fhreastalaí. Mar sin féin, is féidir leat bainistíocht origines a uathoibriú trí úsáid a bhaint as an array cliant origins TacoTranslate.

Smaoinigh ar an sampla seo, áit a bhfuil ár gcomhpháirteanna agus leathanach scartha 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í údaraithe taobh freastalaí le haghaidh tuilleadh eolais faoi getTacoTranslateStaticProps.

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