დოკუმენტაცია: საუკეთესო პრაქტიკა

საუკეთესო პრაქტიკები

Georgian

URL-ები ჩასვით ცვლადებში

როცა თარგმნით სტრიქონებს, რომლებსაც შეიცავენ URL-ები ან მსგავსი მონაცემები, კარგი პრაქტიკაა დაანონოთ ეს URL-ები ცვლადებში და შემდეგ იხსნათ ისინი თქვენს შაბლონებში.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

ინტერაქტიული ელემენტების ტექსტის, როგორიცაა ღილაკები, გადათარგმნის დროს მნიშვნელოვანია ARIA ნიშნების დამატება, რათა უზრუნველყოთ ხელმისაწვდომობა. ARIA ნიშნები ეხმარება ეკრანის რიდერებს მოაწოდონ აღწერითი ინფორმაცია ელემენტის ფუნქციის შესახებ.

მაგალითად, თუ გაქვთ ღილაკი, რომელიც მომხმარებლებს აძლევს საშუალებას დააკოპირონ ტექსტი კოდის ბლოკიდან, შეგიძლიათ გამოიყენოთ aria-label ატრიბუტი მკაფიო აღწერილობის მისაცემად:

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

ამის შესახებ რაღაც გარეგნულად მეტაა.

გლობალური წარმოშობების მასივი და მრავალკომპონენტური წარმოშობები

ეს პატერნი მუშაობს მხოლოდ მაშინ, როცა გამოიყენება Next.js Pages Router.

დიდი აპლიკაციებთან მუშაობის დროს სასარგებლოა სტრინგებისა და თარგმნების გაყოფა რამდენიმე, მცირე წარმოშობაზე. ეს მიდგომა ხელს უწყობს პაკეტის ზომის და ტრანსპორტირების დროთა შემცირებას, რაც უზრუნველყოფს ეფექტურ და მასშტაბირებად ლოკალიზაციას.

ამას მარტივად მოიფიქრებთ მხოლოდ კლიენტის მხარეზე რენდერების დროს, მაგრამ წარმოშობების მართვა სწრაფად იძენს სირთულის when სერვერზე რენდერებისთვის თარგმნების აღების დროს. თუმცა, შეგიძლიათ გააუმარტივოთ წარმოშობების მართვა, გამოიყენეთ TacoTranslate კლიენტის origins მასივი.

გაითვალისწინეთ ეს მაგალითი, სადაც ჩვენ გვყავს კომპონენტები და გვერდები დაშორებულ ფაილებში.

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});
}

იხილეთ ჩვენი სერვერზე დაფუძნებული დღეგრძელობის მაგალითები დამატებითი ინფორმაციისთვის getTacoTranslateStaticProps.

შეცდომების მართვა და დებაგინგი

საუკეთესო პრაქტიკები

მიიყენეთ ARIA ლეიბლები

გლობალური წარმოშობების მასივი და მრავალკომპონენტური წარმოშობები