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

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

Georgian

URL-ები გადააწყვეთ ცვლადებში

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

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

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

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

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

ამში რაღაც ძალიან მეტა გრძნობა არის.

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

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

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

ამასთან, ეს მარტივია მხოლოდ კლაიენტის მხარეზე რენდერირების დროს, მაგრამ წარმოშობის მართვა სწრაფად ხდება რთული, როცა თარგმანების ჩამოტვირთვას ახდენთ სერვერის მხარეის რენდერირებისათვის. თუმცა, შეგიძლიათ წარმოშობის მართვა ავტომატიზირებული გახადოთ 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 ლეიბლები

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