Τεκμηρίωση: Προχωρημένη χρήση

Προηγμένη χρήση

Greek

Διαχείριση γλωσσών από δεξιά προς τα αριστερά

Το TacoTranslate καθιστά εύκολη την υποστήριξη γλωσσών που διαβάζονται από δεξιά προς τα αριστερά (RTL), όπως τα Αραβικά και τα Εβραϊκά, στις εφαρμογές React σας. Η σωστή διαχείριση των γλωσσών RTL διασφαλίζει ότι το περιεχόμενό σας εμφανίζεται σωστά για τους χρήστες που διαβάζουν από δεξιά προς τα αριστερά.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Μπορείτε επίσης να χρησιμοποιήσετε τη διαθέσιμη συνάρτηση isRightToLeftLocaleCode για να ελέγξετε την τρέχουσα γλώσσα εκτός από το React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Απενεργοποίηση μετάφρασης

Για να απενεργοποιήσετε τη μετάφραση για συγκεκριμένα μέρη μιας συμβολοσειράς ή για να διασφαλίσετε ότι ορισμένα τμήματα παραμένουν ως έχουν, μπορείτε να χρησιμοποιήσετε τριπλές αγκύλες. Αυτή η λειτουργία είναι χρήσιμη για τη διατήρηση της αρχικής μορφής ονομάτων, τεχνικών όρων ή οποιουδήποτε άλλου περιεχομένου που δεν πρέπει να μεταφραστεί.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

Σε αυτό το παράδειγμα, η λέξη «TacoTranslate» θα παραμείνει αμετάβλητη στη μετάφραση.

Πολλαπλοί πάροχοι TacoTranslate

Σας ενθαρρύνουμε έντονα να χρησιμοποιείτε πολλαπλούς TacoTranslate παρόχους στην εφαρμογή σας. Αυτό είναι χρήσιμο για την οργάνωση των μεταφράσεων και των αλφαριθμητικών σας σε διαφορετικές προελεύσεις, όπως την κεφαλίδα, το υποσέλιδο ή συγκεκριμένες ενότητες.

Μπορείτε να διαβάσετε περισσότερα για τη χρήση των origins εδώ.

Οι πάροχοι TacoTranslate κληρονομούν τις ρυθμίσεις από οποιονδήποτε γονικό πάροχο, οπότε δεν θα χρειαστεί να επαναλάβετε άλλες ρυθμίσεις.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Header() {
	return (
		<TacoTranslate origin="header">
			// ...
		</TacoTranslate>
	);
}

function Menu() {
	return (
		<TacoTranslate origin="menu">
			// ...
		</TacoTranslate>
	);
}

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Header />
			<Menu />
		</TacoTranslate>
	);
}

Αντικατάσταση προέλευσης ή τοπικής ρύθμισης

Εκτός από τη χρήση πολλαπλών προμηθευτών TacoTranslate, μπορείτε επίσης να παραβλέψετε τόσο το origin όσο και το locale στα επίπεδα του συστατικού Translate και του hook useTranslation.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Διαχείριση φόρτωσης

Όταν αλλάζετε γλώσσες στην πλευρά του πελάτη, η λήψη των μεταφράσεων μπορεί να πάρει λίγα δευτερόλεπτα ανάλογα με τη σύνδεση του χρήστη. Μπορείτε να εμφανίσετε έναν δείκτη φόρτωσης για να βελτιώσετε την εμπειρία χρήστη παρέχοντας οπτική ανατροφοδότηση κατά την αλλαγή.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Πληθυντικός αριθμός

Για να χειριστείτε σωστά τον πληθυντικό και να εμφανίσετε ετικέτες βασισμένες σε αριθμούς σωστά σε διαφορετικές γλώσσες, αυτό θεωρείται βέλτιστη πρακτική:

import {Translate, useLocale} from 'tacotranslate/react';

function PhotoCount() {
	const locale = useLocale();
	const count = 1;

	return count === 0 ? (
		<Translate string="You have no photos." />
	) : count === 1 ? (
		<Translate string="You have 1 photo." />
	) : (
		<Translate
			string="You have {{count}} photos."
			variables={{count: count.toLocaleString(locale)}}
		/>
	);
}

Πολλαπλές γλώσσες

Για να υποστηρίξετε πολλές γλώσσες ταυτόχρονα μέσα στην ίδια εφαρμογή, μπορείτε να χρησιμοποιήσετε πολλαπλούς παρόχους TacoTranslate με διαφορετικές τιμές locale όπως φαίνεται παρακάτω:

Μπορείτε επίσης να παρακάμψετε το locale στο επίπεδο του component ή του hook.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate, Translate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Spanish() {
	return (
		<TacoTranslate locale="es">
			<Translate string="Hello, world in Spanish!" />
		</TacoTranslate>
	);
}

function Norwegian() {
	return (
		<TacoTranslate locale="no">
			<Translate string="Hello, world in Norwegian!" />
		</TacoTranslate>
	);
}

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Spanish />
			<Norwegian />
		</TacoTranslate>
	);
}

Χρήση αναγνωριστικών μετάφρασης

Μπορείτε να προσθέσετε ένα id στο component Translate για να χειριστείτε διαφορετικές μεταφράσεις ή σημασίες για το ίδιο κείμενο. Αυτό είναι ιδιαίτερα χρήσιμο όταν το ίδιο κείμενο απαιτεί διαφορετικές μεταφράσεις ανάλογα με το πλαίσιο. Αναθέτοντας μοναδικά IDs, διασφαλίζετε ότι κάθε εμφάνιση του κειμένου μεταφράζεται με ακρίβεια σύμφωνα με τη συγκεκριμένη του έννοια.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Για παράδειγμα, το login της κεφαλίδας μπορεί να μεταφραστεί ως «Iniciar sesión» και το login του υποσέλιδου μπορεί να μεταφραστεί ως «Acceder» στα Ισπανικά.

Καλές πρακτικές