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

Χρήση του TacoTranslate

Greek

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

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

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

import {Translate} from 'tacotranslate/react';

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

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

Χρήση του useTranslation hook.
Επιστρέφει μεταφράσεις ως απλό κείμενο. Χρήσιμο, για παράδειγμα, σε ετικέτες 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 μεταφράσεις μας, παρέχουν μια γρήγορη αρχική απόκριση.

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

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

Αξιοποίηση προελεύσεων

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

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

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

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

Διαχείριση μεταβλητών

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

Οι μεταβλητές στις συμβολοσειρές δηλώνονται χρησιμοποιώντας διπλά αγκύλες, όπως {{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}
		/>
	);
}

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

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