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

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

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-ის გამოყენებისას.

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

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

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