Giới thiệu về dịch vụ Hitokoto
Hitokoto, hay còn được biết đến với tên "一言" (Nhất Ngôn) trong tiếng Trung, là một dịch vụ cung cấp các câu trích dẫn ngắn gọn, ý nghĩa từ nhiều nguồn khác nhau. Ra đời từ năm 2016, mục tiêu của Hitokoto là tập hợp những câu nói chạm đến cảm xúc, những đoạn hội thoại đáng nhớ từ phim hoạt hình (anime), tiểu thuyết, hay các nội dung trên mạng internet. Dịch vụ này giúp người dùng dễ dàng truy cập và chia sẻ những câu nói truyền cảm hứng, mang lại niềm vui hoặc gợi nhớ kỷ niệm.
Về cơ bản, một "hitokoto" là một câu văn đơn lẻ, có thể là một đoạn thoại cảm động từ một bộ phim, một câu châm ngôn sâu sắc từ một cuốn sách, hay đơn giản là một dòng trạng thái thú vị được lan truyền trên mạng. Mục đích chính là tạo một nền tảng để mọi người có thể tìm thấy, đóng góp và chia sẻ những câu nói yêu thích của mình.
Sử dụng API Hitokoto công khai
Để tích hợp các câu trích dẫn ngẫu nhiên từ Hitokoto vào trang web hoặc ứng dụng của bạn, bạn có thể sử dụng API công khai của họ. Dưới đây là cách gọi API và một số ví dụ:
Các điểm cuối API cơ bản:
https://v1.hitokoto.cn/: Lấy một câu trích dẫn ngẫu nhiên từ tất cả 7 danh mục có sẵn.https://v1.hitokoto.cn/?c=b: Lấy một câu trích dẫn ngẫu nhiên thuộc danh mục truyện tranh (manga).https://v1.hitokoto.cn/?c=f&encode=text: Lấy một câu trích dẫn từ internet, xuất ra dưới dạng văn bản thuần túy thay vì JSON.
Ví dụ tích hợp trên trang web:
Để hiển thị một câu trích dẫn Hitokoto trên trang HTML của bạn, hãy sử dụng một trong các phương pháp sau:
:D Đang tải trích dẫn...
Phương pháp hiện đại (sử dụng fetch API):
Đây là phương pháp được khuyến nghị cho các trình duyệt hiện đại, sử dụng Promise để xử lý bất đồng bộ.
<script>
// Lấy phần tử HTML nơi trích dẫn sẽ được hiển thị
const targetElement = document.getElementById('quoteDisplay');
// Gửi yêu cầu GET tới API Hitokoto
fetch('https://v1.hitokoto.cn')
.then(response => response.json()) // Chuyển đổi phản hồi thành đối tượng JSON
.then(quoteData => {
// Cập nhật nội dung của phần tử HTML với câu trích dẫn và nguồn
targetElement.innerText = `${quoteData.hitokoto} — ${quoteData.from}`;
})
.catch(error => {
// Xử lý lỗi nếu có vấn đề trong quá trình tải
console.error('Lỗi khi tải trích dẫn:', error);
targetElement.innerText = 'Không thể tải trích dẫn vào lúc này.';
});
</script>
Phương pháp truyền thống (sử dụng XMLHttpRequest):
Phương pháp này tương thích với các trình duyệt cũ hơn, không hỗ trợ fetch API.
<script>
// Lấy phần tử HTML để hiển thị trích dẫn
const targetElementLegacy = document.getElementById('quoteDisplay');
const httpRequest = new XMLHttpRequest(); // Tạo đối tượng XMLHttpRequest
// Mở một yêu cầu GET tới API
httpRequest.open('GET', 'https://v1.hitokoto.cn');
// Thiết lập hàm xử lý khi trạng thái yêu cầu thay đổi
httpRequest.onreadystatechange = function () {
// Kiểm tra nếu yêu cầu hoàn tất và thành công (status 200)
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
try {
// Phân tích phản hồi JSON
const responseData = JSON.parse(httpRequest.responseText);
targetElementLegacy.innerText = `${responseData.hitokoto} — ${responseData.from}`;
} catch (e) {
// Xử lý lỗi khi phân tích JSON
console.error('Lỗi khi phân tích dữ liệu JSON:', e);
targetElementLegacy.innerText = 'Không thể hiển thị trích dẫn.';
}
} else if (httpRequest.readyState === 4) {
// Xử lý lỗi nếu yêu cầu hoàn tất nhưng không thành công
console.error('Lỗi khi yêu cầu trích dẫn, trạng thái:', httpRequest.status);
targetElementLegacy.innerText = 'Lỗi khi tải trích dẫn.';
}
};
httpRequest.send(); // Gửi yêu cầu
</script>
Phương pháp API mới, đơn giản:
Cách này cực kỳ gọn gàng, chỉ cần một thẻ <script> để chèn trực tiếp nội dung vào một phần tử đã chọn mà không cần viết thêm JavaScript.
<!-- Thẻ script này sẽ tự động tìm phần tử có id 'quoteDisplay' và chèn trích dẫn vào đó -->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23quoteDisplay" defer></script>
Xây dựng dịch vụ trích dẫn ngẫu nhiên của riêng bạn
Nếu bạn muốn có toàn quyền kiểm soát nội dung và cách thức hoạt động của dịch vụ trích dẫn, bạn có thể tự xây dựng một phiên bản "Hitokoto" của riêng mình trên máy chủ. Dưới đây là hướng dẫn cơ bản sử dụng PHP và một tập tin văn bản.
Mã PHP cho máy chủ:
Tạo một tập tin có tên quote_api.php trên máy chủ web của bạn với nội dung sau. Tập tin này sẽ đọc ngẫu nhiên một dòng từ một tập tin chứa các câu trích dẫn.
<?php
// Lấy đường dẫn tuyệt đối của thư mục hiện tại
$currentDirPath = __DIR__;
// Đường dẫn đến tập tin chứa các câu trích dẫn của bạn
$localQuoteFile = $currentDirPath . "/quotes_data.txt";
// Kiểm tra xem tập tin trích dẫn có tồn tại không
if (!file_exists($localQuoteFile)) {
http_response_code(500); // Đặt mã trạng thái HTTP là 500
echo "Lỗi máy chủ: Tập tin 'quotes_data.txt' không tìm thấy.";
exit;
}
// Đọc tất cả các dòng từ tập tin vào một mảng, bỏ qua dòng trống và ký tự xuống dòng
$quoteCollection = file($localQuoteFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
// Kiểm tra nếu tập tin trích dẫn rỗng
if (empty($quoteCollection)) {
http_response_code(500);
echo "Lỗi máy chủ: Tập tin 'quotes_data.txt' không có nội dung.";
exit;
}
// Chọn ngẫu nhiên một chỉ mục từ mảng
$randomQuoteIndex = mt_rand(0, count($quoteCollection) - 1);
$selectedOutputQuote = trim($quoteCollection[$randomQuoteIndex]);
// Xử lý tham số charset (mã hóa ký tự)
$outputCharset = 'utf-8'; // Mặc định là UTF-8
if (isset($_GET['charset']) && !empty($_GET['charset'])) {
$requestedCharset = strtolower($_GET['charset']);
if ($requestedCharset === 'gbk') {
// Chuyển đổi mã hóa nếu người dùng yêu cầu GBK
$selectedOutputQuote = mb_convert_encoding($selectedOutputQuote, 'gbk', 'utf-8');
$outputCharset = 'gbk';
}
}
// Đặt header Content-Type cho phản hồi
header("Content-Type: text/html; charset=$outputCharset");
// Xử lý tham số format (định dạng đầu ra)
if (isset($_GET['format']) && $_GET['format'] === 'js') {
// Nếu yêu cầu định dạng JavaScript, tạo một hàm JS
// Cần escape các ký tự đặc biệt trong câu trích dẫn để nó an toàn khi chèn vào chuỗi JS
$jsSafeQuote = addslashes($selectedOutputQuote);
echo "function renderCustomQuote(){ document.write('" . $jsSafeQuote . "'); }";
} else {
// Mặc định xuất văn bản thuần túy
echo $selectedOutputQuote;
}
?>
Tạo tập tin trích dẫn (quotes_data.txt):
Bên cạnh tập tin quote_api.php, bạn cần tạo một tập tin văn bản mới, ví dụ quotes_data.txt. Mỗi dòng trong tập tin này sẽ là một câu trích dẫn riêng biệt.
Lưu ý quan trọng: Đảm bảo tập tin quotes_data.txt được lưu với mã hóa UTF-8 để tránh lỗi hiển thị ký tự đặc biệt khi dịch vụ của bạn hoạt động.
Sau khi thiết lập, khi bạn truy cập http://yourdomain.com/quote_api.php trên trình duyệt, bạn sẽ thấy một câu trích dẫn ngẫu nhiên được hiển thị.
Gọi dịch vụ trích dẫn tùy chỉnh của bạn:
Để hiển thị câu trích dẫn từ dịch vụ của bạn trên một trang web khác, sử dụng đoạn mã HTML/JavaScript sau. Đảm bảo thay thế https://yourdomain.com/path/to/quote_api.php bằng URL thực tế của tập tin PHP của bạn.
<div id="customQuoteZone">
<script type="text/javascript" src="https://yourdomain.com/path/to/quote_api.php?format=js&charset=utf-8"></script>
<!-- Sau khi script trên được tải, nó sẽ định nghĩa hàm renderCustomQuote(). -->
<script>
// Kiểm tra nếu hàm renderCustomQuote đã được định nghĩa trước khi gọi
if (typeof renderCustomQuote === 'function') {
renderCustomQuote(); // Gọi hàm để hiển thị trích dẫn vào vị trí của script này
} else {
document.write('Không thể tải trích dẫn tùy chỉnh.');
}
</script>
</div>