Cara Menambah Chatbot AI Asyntai ke Hugo

Panduan langkah demi langkah untuk penjana laman statik Hugo

Platform:

Langkah 1: Dapatkan Kod Benam Anda

Pertama, pergi ke Papan Pemuka Asyntai anda dan tatal ke bawah ke bahagian "Kod Benam". Salin kod benam unik anda yang akan kelihatan seperti ini:

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

Nota: Kod di atas hanyalah contoh. Anda mesti menyalin kod benam unik anda sendiri dari Papan Pemuka anda kerana ia mengandungi ID widget peribadi anda.

Langkah 2: Tambah Kod ke Separa Tema (Disyorkan)

Cara terbaik untuk menambah chatbot ke semua halaman laman Hugo anda ialah dengan membuat separa:

Navigasi ke direktori layouts/partials/ projek Hugo anda
Buat fail baharu yang dipanggil asyntai-widget.html
Tampal kod benam Asyntai anda ke dalam fail ini:

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

Buka fail baseof.html tema anda (biasanya dalam layouts/_default/baseof.html)
Tambah separa sebelum tag penutup </body>:

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

Simpan fail dan bina semula laman Hugo anda

Petua: Menggunakan separa ialah cara yang disyorkan oleh Hugo untuk menyertakan komponen boleh guna semula. Kaedah ini memastikan chatbot muncul pada setiap halaman yang menggunakan templat baseof.html, yang biasanya semua halaman pada laman anda.

Kaedah Alternatif 1: Tambah ke Separa Head

Jika tema anda mempunyai separa head, anda boleh menambah kod di situ:

Cari separa head tema anda (biasanya layouts/partials/head.html)
Jika ia tidak wujud, buat layouts/partials/head.html dalam akar projek anda
Tambah kod benam Asyntai anda ke fail ini:

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

Pastikan baseof.html anda menyertakan separa ini dalam bahagian <head>:

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

Nota: Jika tema anda sudah mempunyai separa head.html dengan kandungan sedia ada, cuma tambahkan kod Asyntai anda kepadanya. Jangan gantikan kandungan sedia ada.

Kaedah Alternatif 2: Folder Statik dengan JavaScript Tersuai

Untuk pendekatan yang lebih modular menggunakan folder statik Hugo:

Navigasi ke direktori static/js/ projek Hugo anda
Buat direktori jika ia belum wujud
Buat fail baharu yang dipanggil asyntai-loader.js
Tambah kod berikut untuk memuatkan widget:

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

Rujuk fail ini dalam baseof.html atau separa footer anda sebelum </body>:

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

Petua: Fail dalam direktori static/ disalin seadanya ke akar laman yang diterbitkan. Fungsi relURL menjana laluan relatif yang betul untuk pelaksanaan anda.

Kaedah Alternatif 3: Konfigurasi Hugo (config.toml/yaml)

Untuk sesetengah tema Hugo yang menyokong skrip tersuai melalui konfigurasi:

# 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

Nota: Kaedah ini hanya berfungsi jika tema anda menyokong parameter customJS. Semak dokumentasi tema anda. Anda juga mungkin perlu menambah atribut data-asyntai-id melalui penyesuaian tema.

Kaedah Alternatif 4: Front Matter (Khusus Halaman)

Untuk menambah chatbot ke halaman tertentu sahaja:

Tambah parameter tersuai ke front matter halaman anda:

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

Dalam baseof.html atau separa anda, tambah logik bersyarat:

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

Petua: Pendekatan ini memberikan anda kawalan terperinci ke atas halaman mana yang menyertakan chatbot. Ia berguna untuk laman dokumentasi di mana anda hanya mahu widget pada bahagian tertentu.

Kaedah Alternatif 5: Mengatasi Susun Atur Tema

Untuk mengatasi susun atur tema anda tanpa mengubah suai fail tema:

Salin baseof.html tema dari themes/your-theme/layouts/_default/
Tampal ia ke dalam layouts/_default/baseof.html projek anda
Tambah kod benam Asyntai anda sebelum tag penutup </body>
Simpan dan bina semula laman anda

Penting: Apabila anda mengatasi fail tema, anda tidak akan menerima kemas kini secara automatik kepada fail tersebut apabila tema dikemas kini. Kaedah ini memberikan anda kawalan penuh tetapi memerlukan lebih penyelenggaraan. Pertimbangkan untuk menggunakan separa sebagai gantinya untuk kemas kini tema yang lebih mudah.

Langkah 3: Bina dan Laksanakan

Selepas menambah kod, bina laman Hugo anda:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Laman yang dijana akan berada dalam direktori public/
Laksanakan direktori ini ke platform pengehosan anda (Netlify, Vercel, GitHub Pages, dll.)

Petua: Semasa pembangunan, gunakan hugo server untuk pratonton laman anda secara tempatan di http://localhost:1313. Chatbot sepatutnya muncul di sudut kanan bawah pada semua halaman.

Langkah 4: Sahkan Pemasangan

Selepas melaksanakan laman Hugo anda, buka ia dalam tab pelayar baharu. Anda sepatutnya melihat butang widget sembang di sudut kanan bawah. Klik untuk memastikan ia terbuka dan berfungsi dengan betul.

Tidak nampak widget? Pastikan anda telah membina semula laman anda dengan perintah hugo selepas membuat perubahan. Pastikan anda telah menggantikan YOUR_WIDGET_ID dengan ID widget sebenar anda dari papan pemuka. Kosongkan cache pelayar anda atau lihat dalam mod inkognito. Jika menggunakan CDN, anda mungkin perlu membatalkan cache. Buka konsol pelayar (F12) untuk menyemak sebarang ralat JavaScript.

Dokumentasi