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

Sử dụng TacoTranslate

Vietnamese

Dịch các chuỗi ký tự

Hiện tại có ba cách để dịch 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, và hỗ trợ hiển thị HTML.

import {Translate} from 'tacotranslate/react';

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

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

Sử dụng useTranslation hook.
Trả về bản dịch dưới dạng chuỗi thuần. Hữu ích trong, ví dụ, 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 trên phía máy chủ. Tăng cường sức mạnh cho 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 chuỗi đến máy chủ của chúng tôi, trước tiên chúng tôi kiểm tra và lưu chúng, sau đó ngay lập tức trả về bản dịch máy. Mặc dù các bản dịch máy thường 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 công việc dịch bất đồng bộ để tạo ra bản dịch AI chất lượng cao, tiên tiến nhất cho chuỗi của bạn. Một khi bản dịch AI đã sẵn sàng, nó sẽ thay thế bản dịch máy và được gửi mỗi khi bạn yêu cầu dịch cho các chuỗi của mình.

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

Sử dụng nguồn gốc

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

import {TacoTranslate} from 'tacotranslate/react';

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

Origins cho phép bạn tách các chuỗi thành các container có ý nghĩa. Ví dụ, bạn có thể có một origin cho tài liệu và một origin khác cho trang tiếp thị của bạn.

Để kiểm soát chi tiết hơn, bạn có thể thiết lập origins ở cấp độ component.

Để đạt được điều này, hãy xem xét 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ể nhận được các bản dịch khác nhau trong các origins khác nhau.

Cuối cùng, cách bạn phân tách chuỗi thành các nguồn phụ 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 có nhiều chuỗi trong một nguồn có thể làm tăng thời gian tải.

Xử lý biến

Bạn luôn nên sử dụng các biến cho nội dung động, chẳng hạn như tên người dùng, ngày tháng, địa chỉ email, và nhiều hơn nữa.

Các biến trong chuỗi được khai báo bằng cách sử dụng dấu ngoặc kép, như {{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, Translate component hỗ trợ và hiển thị nội dung HTML. Tuy nhiên, bạn có thể không sử dụng hành vi này bằng cách đặt useDangerouslySetInnerHTML thành false.

Việc tắt hiển thị HTML được khuyến nghị mạnh mẽ 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 ra.

Tất cả đầu ra luôn được sanitize-html lọc sạch 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.

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 nguồn gốc

Xử lý biến

Quản lý nội dung HTML