Doiciméadú: Cleachtais is Fearr

Cleachtais is Fearr

Irish

Cuir URLanna i nathanna athraitheacha

Nuair a bhíonn tú ag aistriú sreanga a bhfuil URLanna nó sonraí cosúla iontu, meastar gur cleachtas maith é na URLanna seo a chur laistigh de athróg agus ansin tagairt a dhéanamh dóibh laistigh de do théamaí.

<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 chóid, 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 thurgnamhach a sholáthar faoi fheidhm na heilimintí.

Mar shampla, má tá cnaipe agat a ligeann do úsáideoirí téacs a chóipeáil ón mbloc cód, is féidir leat an sochar aria-label a úsáid chun cur síos soiléir a thabhairt:

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

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

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

Ní oibríonn an patrún seo ach amháin agus an 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í de shraithú taobh an fhreastalaí le haghaidh tuilleadh eolais faoi getTacoTranslateStaticProps.

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