Tài liệu: Sử dụng TacoTranslate

Sử dụng TacoTranslate

Vietnamese

Dịch các chuỗi

Hiện tại có ba cách để dịch các chuỗi: thành phần Translate, hook useTranslation, hoặc tiện ích translateEntries.

Sử dụng thành phần Translate.
Hiển thị bản dịch bên trong một phần tử span, đồng thời hỗ trợ kết xuất HTML.

import {Translate} from 'tacotranslate/react';

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

Bạn có thể thay đổi kiểu phần tử bằng cách, ví dụ, sử dụng as="p" trên component.

Sử dụng hook useTranslation.
Trả về các bản dịch dưới dạng chuỗi thuần. Hữu ích, ví dụ, trong các thẻ 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>
	);
}

Sử dụng tiện ích translateEntries.
Dịch các chuỗi ở phía máy chủ. Tăng cường hình ảnh OpenGraph của bạn.

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)
	};
}

Khi các chuỗi đến máy chủ của chúng tôi, trước tiên chúng tôi xác thực và lưu chúng, sau đó ngay lập tức trả về bản dịch máy. Mặc dù bản dịch máy nhìn chung có chất lượng thấp hơn so với bản dịch AI của chúng tôi, nhưng chúng cung cấp phản hồi ban đầu nhanh chóng.

Đồng thời, chúng tôi khởi tạo một tác vụ dịch bất đồng bộ để tạo ra bản dịch AI chất lượng cao, tiên tiến cho chuỗi ký tự của bạn. Khi bản dịch AI sẵn sàng, nó sẽ thay thế bản dịch máy và sẽ được gửi mỗi khi bạn yêu cầu dịch các chuỗi của mình.

Nếu bạn đã tự dịch một chuỗi, những bản dịch đó sẽ được ưu tiên và trả về.

Sử dụng origins

Dự án TacoTranslate chứa những gì chúng tôi gọi là origins. Hãy coi chúng như các điểm vào, thư mục hoặc nhóm cho chuỗi và bản dịch của bạn.

import {TacoTranslate} from 'tacotranslate/react';

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

Các origin cho phép bạn tách các chuỗi thành những vùng chứa có ý nghĩa. Ví dụ, bạn có thể có một origin cho phần tài liệu và một origin khác cho trang marketing của mình.

Để kiểm soát chi tiết hơn, bạn có thể thiết lập origins ở cấp thành phần.

Để đạt được điều này, hãy cân nhắc sử dụng nhiều nhà cung cấp TacoTranslate trong dự án của bạn.

Xin lưu ý rằng cùng một chuỗi có thể có các bản dịch khác nhau ở các nguồn khác nhau.

Cuối cùng, việc bạn phân chia các chuỗi thành các nguồn tùy thuộc vào bạn và nhu cầu của bạn. Tuy nhiên, hãy lưu ý rằng việc chứa quá nhiều chuỗi trong cùng một nguồn có thể làm tăng thời gian tải.

Xử lý biến

Bạn nên luôn sử dụng các biến cho nội dung động, chẳng hạn tên người dùng, ngày tháng, địa chỉ e-mail và các nội dung khác.

Các biến trong chuỗi được khai báo bằng hai dấu ngoặc nhọn, ví dụ {{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}});
}

Quản lý nội dung HTML

Theo mặc định, thành phần Translate hỗ trợ và hiển thị nội dung HTML. Tuy nhiên, bạn có thể vô hiệu hóa hành vi này bằng cách đặt useDangerouslySetInnerHTML thành false.

Rất khuyến nghị vô hiệu hóa kết xuất HTML khi dịch nội dung không đáng tin cậy, chẳng hạn như nội dung do người dùng tạo.

Tất cả đầu ra luôn được làm sạch bằng sanitize-html trước khi được hiển thị.

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}
		/>
	);
}

Ví dụ ở trên sẽ được hiển thị dưới dạng văn bản thuần túy.

Kết xuất phía máy chủ

Sử dụng TacoTranslate

Cách các chuỗi được dịch

Sử dụng origins

Xử lý biến

Quản lý nội dung HTML