Τεκμηρίωση: Χρήση του TacoTranslate

Χρήση του TacoTranslate

Greek

Μετάφραση συμβολοσειρών

Υπάρχουν επί του παρόντος τρεις τρόποι για να μεταφράσετε συμβολοσειρές: Το συστατικό Translate, το hook useTranslation ή το εργαλείο translateEntries.

Χρήση του στοιχείου Translate
Εμφανίζει τις μεταφράσεις μέσα σε ένα στοιχείο span, και υποστηρίζει την απόδοση HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Μπορείτε να αλλάξετε τον τύπο στοιχείου χρησιμοποιώντας, για παράδειγμα, as="p" στο συστατικό.

Χρήση του hook useTranslation.
Επιστρέφει μεταφράσεις ως απλό κείμενο. Χρήσιμο για παράδειγμα σε ετικέτες meta.

import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';

function Page() {
	const helloWorld = useTranslation('Hello, world!');

	useEffect(() => {
		alert(helloWorld);
	}, [helloWorld]);

	return (
		<title>{useTranslation('My page title')}</title>
	);
}

Χρήση του βοηθητικού προγράμματος translateEntries.
Μεταφράστε αλφαριθμητικά στην πλευρά του διακομιστή. Ενισχύστε τις εικόνες OpenGraph σας.

import {createEntry, translateEntries} from 'tacotranslate';

async function generateMetadata(locale = 'es') {
	const title = createEntry({string: 'Hello, world!'});
	const description = createEntry({string: 'TacoTranslate on the server'});

	const translations = await translateEntries(
		tacoTranslate,
		{origin: 'opengraph', locale},
		[title, description]
	);

	return {
		title: translations(title),
		description: translations(description)
	};
}

Πώς μεταφράζονται οι συμβολοσειρές

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

Ταυτόχρονα, ξεκινούμε μια ασύγχρονη εργασία μετάφρασης για να δημιουργήσουμε μια υψηλής ποιότητας, προηγμένη μετάφραση AI για το κείμενό σας. Μόλις η μετάφραση AI είναι έτοιμη, θα αντικαταστήσει τη μηχανική μετάφραση και θα αποστέλλεται κάθε φορά που ζητάτε μεταφράσεις για τα κείμενά σας.

Εάν έχετε μεταφράσει χειροκίνητα μια συμβολοσειρά, αυτές οι μεταφράσεις έχουν προτεραιότητα και επιστρέφονται αντί αυτών.

Χρήση προελεύσεων

Τα έργα TacoTranslate περιέχουν αυτά που ονομάζουμε origins. Σκεφτείτε τα ως σημεία εισόδου, φακέλους ή ομάδες για τις συμβολοσειρές και τις μεταφράσεις σας.

import {TacoTranslate} from 'tacotranslate/react';

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

Τα Origins σας επιτρέπουν να χωρίζετε τις συμβολοσειρές σε ουσιαστικά δοχεία. Για παράδειγμα, θα μπορούσατε να έχετε ένα origin για την τεκμηρίωση και ένα άλλο για τη σελίδα μάρκετινγκ σας.

Για πιο λεπτομερή έλεγχο, μπορείτε να ρυθμίσετε τα origins σε επίπεδο component.

Για να το πετύχετε αυτό, σκεφτείτε να χρησιμοποιήσετε πολλούς παρόχους TacoTranslate μέσα στο πρότζεκτ σας.

Παρακαλούμε σημειώστε ότι το ίδιο κείμενο ενδέχεται να λάβει διαφορετικές μεταφράσεις σε διαφορετικές προελεύσεις.

Τελικά, ο τρόπος που διαχωρίζετε τις συμβολοσειρές σε origins εξαρτάται από εσάς και τις ανάγκες σας. Ωστόσο, σημειώστε ότι η ύπαρξη πολλών συμβολοσειρών σε ένα origin μπορεί να αυξήσει τους χρόνους φόρτωσης.

Χειρισμός μεταβλητών

Πρέπει πάντα να χρησιμοποιείτε μεταβλητές για δυναμικό περιεχόμενο, όπως ονόματα χρηστών, ημερομηνίες, διευθύνσεις e-mail και άλλα.

Οι μεταβλητές σε συμβολοσειρές δηλώνονται χρησιμοποιώντας διπλά αγκύλες, όπως {{variable}}.

import {Translate} from 'tacotranslate/react';

function Greeting() {
	const name = 'Juan';
	return <Translate string="Hello, {{name}}!" variables={{name}} />;
}

import {useTranslation} from 'tacotranslate/react';

function useGreeting() {
	const name = 'Juan';
	return useTranslation('Hello, {{name}}!', {variables: {name}});
}

Διαχείριση περιεχομένου HTML

Κατά προεπιλογή, το συστατικό Translate υποστηρίζει και αποδίδει περιεχόμενο HTML. Ωστόσο, μπορείτε να απενεργοποιήσετε αυτήν τη συμπεριφορά ρυθμίζοντας το useDangerouslySetInnerHTML σε false.

Η απενεργοποίηση της απόδοσης HTML συνιστάται έντονα όταν μεταφράζετε μη αξιόπιστο περιεχόμενο, όπως περιεχόμενο που δημιουργείται από χρήστες.

Όλη η έξοδος καθαρίζεται πάντα με sanitize-html πριν αποδοθεί.

import {Translate} from 'tacotranslate/react';

function Page() {
	return (
		<Translate
			string={`
				Welcome to <strong>my</strong> website.
				I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
			`}
			variables={{url: 'https://tacotranslate.com'}}
			useDangerouslySetInnerHTML={false}
		/>
	);
}

Το παραπάνω παράδειγμα θα εμφανιστεί ως απλό κείμενο.

Απόδοση στην πλευρά του διακομιστή