Cách Thêm Chatbot AI Asyntai vào Hugo

Hướng dẫn từng bước cho trình tạo trang tĩnh Hugo

Nền tảng:

Bước 1: Lấy Mã Nhúng của Bạn

Đầu tiên, đi đến Bảng điều khiển Asyntai và cuộn xuống phần "Mã Nhúng". Sao chép mã nhúng duy nhất của bạn sẽ trông như thế này:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Lưu ý: Mã ở trên chỉ là ví dụ. Bạn phải sao chép mã nhúng duy nhất của riêng mình từ Bảng điều khiển vì nó chứa ID tiện ích cá nhân của bạn.

Bước 2: Thêm Mã vào Partial Giao diện (Khuyến nghị)

Cách tốt nhất để thêm chatbot vào tất cả trang của trang Hugo là tạo partial:

Điều hướng đến thư mục layouts/partials/ của dự án Hugo
Tạo tệp mới có tên asyntai-widget.html
Dán mã nhúng Asyntai vào tệp này:

<!-- layouts/partials/asyntai-widget.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Mở tệp baseof.html của giao diện (thường trong layouts/_default/baseof.html)
Thêm partial trước thẻ đóng </body>:

    {{ partial "asyntai-widget.html" . }}
  </body>
</html>

Lưu tệp và xây dựng lại trang Hugo

Mẹo: Sử dụng partial là cách Hugo khuyến nghị để bao gồm các thành phần tái sử dụng. Phương pháp này đảm bảo chatbot xuất hiện trên mọi trang sử dụng mẫu baseof.html, thường là tất cả trang trên trang web.

Phương pháp Thay thế 1: Thêm vào Partial Head

Nếu giao diện có partial head, bạn có thể thêm mã ở đó:

Tìm partial head của giao diện (thường là layouts/partials/head.html)
Nếu chưa tồn tại, tạo layouts/partials/head.html trong thư mục gốc dự án
Thêm mã nhúng Asyntai vào tệp này:

<!-- layouts/partials/head.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Đảm bảo baseof.html bao gồm partial này trong phần <head>:

<head>
  {{ partial "head.html" . }}
</head>

Lưu ý: Nếu giao diện đã có partial head.html với nội dung hiện có, chỉ cần thêm mã Asyntai vào. Đừng thay thế nội dung hiện có.

Phương pháp Thay thế 2: Thư mục Static với JavaScript Tùy chỉnh

Để có cách tiếp cận theo module hơn sử dụng thư mục static của Hugo:

Điều hướng đến thư mục static/js/ của dự án Hugo
Tạo thư mục nếu chưa tồn tại
Tạo tệp mới có tên asyntai-loader.js
Thêm mã sau để tải tiện ích:

// static/js/asyntai-loader.js
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.head.appendChild(script);
})();

Tham chiếu tệp này trong baseof.html hoặc partial chân trang trước </body>:

<script src="{{ "js/asyntai-loader.js" | relURL }}"></script>
</body>

Mẹo: Tệp trong thư mục static/ được sao chép nguyên vẹn vào thư mục gốc của trang web đã xuất bản. Hàm relURL tạo đường dẫn tương đối chính xác cho triển khai.

Phương pháp Thay thế 3: Cấu hình Hugo (config.toml/yaml)

Dành cho một số giao diện Hugo hỗ trợ tập lệnh tùy chỉnh qua cấu hình:

# config.toml
[params]
  customJS = ["https://asyntai.com/static/js/chat-widget.js"]

# Or in config.yaml
params:
  customJS:
    - https://asyntai.com/static/js/chat-widget.js

Lưu ý: Phương pháp này chỉ hoạt động nếu giao diện hỗ trợ tham số customJS. Kiểm tra tài liệu giao diện. Bạn cũng có thể cần thêm thuộc tính data-asyntai-id qua tùy chỉnh giao diện.

Phương pháp Thay thế 4: Front Matter (Theo Trang)

Để thêm chatbot chỉ vào các trang cụ thể:

Thêm tham số tùy chỉnh vào front matter của trang:

---
title: "My Page"
asyntaiWidget: true
---

Trong baseof.html hoặc partial, thêm logic có điều kiện:

{{ if .Params.asyntaiWidget }}
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{{ end }}

Mẹo: Cách tiếp cận này cho bạn kiểm soát chi tiết trang nào bao gồm chatbot. Hữu ích cho trang tài liệu nơi bạn chỉ muốn tiện ích trên một số phần nhất định.

Phương pháp Thay thế 5: Ghi đè Bố cục Giao diện

Để ghi đè bố cục giao diện mà không sửa đổi tệp giao diện:

Sao chép baseof.html của giao diện từ themes/your-theme/layouts/_default/
Dán vào layouts/_default/baseof.html của dự án
Thêm mã nhúng Asyntai trước thẻ đóng </body>
Lưu và xây dựng lại trang web

Quan trọng: Khi bạn ghi đè tệp giao diện, bạn sẽ không tự động nhận cập nhật cho các tệp đó khi giao diện được cập nhật. Phương pháp này cho bạn toàn quyền kiểm soát nhưng yêu cầu bảo trì nhiều hơn. Hãy cân nhắc sử dụng partial để cập nhật giao diện dễ hơn.

Bước 3: Xây dựng và Triển khai

Sau khi thêm mã, xây dựng trang Hugo:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Trang web được tạo sẽ nằm trong thư mục public/
Triển khai thư mục này lên nền tảng hosting (Netlify, Vercel, GitHub Pages, v.v.)

Mẹo: Trong quá trình phát triển, sử dụng hugo server để xem trước trang web cục bộ tại http://localhost:1313. Chatbot sẽ xuất hiện ở góc dưới bên phải trên tất cả các trang.

Bước 4: Xác minh Cài đặt

Sau khi triển khai trang Hugo, mở nó trong tab trình duyệt mới. Bạn sẽ thấy nút tiện ích trò chuyện ở góc dưới bên phải. Nhấp vào nó để đảm bảo nó mở và hoạt động chính xác.

Không thấy tiện ích? Đảm bảo bạn đã xây dựng lại trang web bằng lệnh hugo sau khi thay đổi. Kiểm tra bạn đã thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế từ bảng điều khiển. Xóa bộ nhớ đệm trình duyệt hoặc xem ở chế độ ẩn danh. Nếu sử dụng CDN, bạn có thể cần xóa bộ nhớ đệm. Mở bảng điều khiển trình duyệt (F12) để kiểm tra lỗi JavaScript.

Tài liệu