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

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

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

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

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

ეს ჩარჩო მუშაობს მხოლოდ 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 წარწერები

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