Déanachán: Cleachtais is Fearr

Cleachtais is Fearr

Irish

Cuir URLanna i n-athróga

Nuair a bhíonn tú ag aistriú sraitheanna ina bhfuil URLanna nó sonraí cosúil leo, measfar gur cleachtas maith é na URLanna seo a chur laistigh de athróg agus ansin tagairt a dhéanamh dóibh laistigh de do themplé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 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 faisnéis thuarascálach a sholáthar faoi fheidhm na heilimintí.

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"
/>

Tá rud éigin faoi seo a mhothaíonn an-mheite.

Raon comhcheangail dhomhanda agus il-úsáid origins comhpháirteanna

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í léirithe taobh an fhreastalaí le haghaidh tuilleadh eolais faoi getTacoTranslateStaticProps.

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