Cara Menambah Chatbot AI Asyntai ke Docusaurus

Panduan langkah demi langkah untuk laman dokumentasi Docusaurus

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 Skrip ke docusaurus.config.js (Disyorkan)

Cara terbaik untuk menambah chatbot ke semua halaman laman Docusaurus anda ialah melalui fail konfigurasi:

Buka projek Docusaurus anda dalam editor kod anda
Cari dan buka fail docusaurus.config.js dalam akar projek anda
Cari objek const config = { }
Tambah atau kemas kini medan scripts dengan widget Asyntai anda:

const config = {
  // ... other config options

  scripts: [
    // Other scripts if any
    {
      src: 'https://asyntai.com/static/js/chat-widget.js',
      'data-asyntai-id': 'YOUR_WIDGET_ID',
      async: true,
    },
  ],

  // ... rest of config
};

Simpan fail docusaurus.config.js
Bina semula laman anda dengan menjalankan npm run build atau yarn build
Mulakan semula pelayan pembangunan jika berjalan secara tempatan

Petua: Medan scripts menerima tatasusunan sumber JavaScript. Tag skrip akan disisipkan dalam head HTML setiap halaman secara automatik. Ini ialah kaedah paling bersih dan paling mudah diselenggara untuk laman Docusaurus.

Kaedah Alternatif 1: Format Rentetan (Sintaks Lebih Mudah)

Jika anda lebih suka pendekatan yang lebih mudah, anda boleh menggunakan format rentetan dalam tatasusunan scripts:

const config = {
  scripts: [
    'https://asyntai.com/static/js/chat-widget.js',
  ],
};

Nota: Apabila menggunakan format rentetan, anda perlu mengubah suai URL skrip untuk menyertakan ID widget anda sebagai parameter pertanyaan, atau gunakan format objek yang ditunjukkan dalam Langkah 2 yang membolehkan anda menetapkan atribut data-asyntai-id secara langsung.

Kaedah Alternatif 2: Tag Head Tersuai

Anda juga boleh menambah skrip menggunakan medan headTags dalam docusaurus.config.js:

const config = {
  headTags: [
    {
      tagName: 'script',
      attributes: {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        'data-asyntai-id': 'YOUR_WIDGET_ID',
        async: true,
      },
    },
  ],
};

Petua: Medan headTags memberikan lebih kawalan ke atas tag HTML yang tepat yang disisipkan ke dalam bahagian <head>. Kaedah ini secara fungsinya setara dengan menggunakan medan scripts.

Kaedah Alternatif 3: Templat HTML Tersuai (Lanjutan)

Untuk pengguna lanjutan yang memerlukan kawalan penuh ke atas templat HTML:

Buat direktori baharu: src/theme (jika belum wujud)
Buat fail: src/theme/Root.js
Tambah kod berikut untuk menyuntik skrip secara dinamik:

import React, { useEffect } from 'react';

export default function Root({children}) {
  useEffect(() => {
    const 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);

    return () => {
      // Cleanup when component unmounts
      document.head.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

Simpan fail dan bina semula laman anda

Penting: Komponen Root.js membungkus seluruh aplikasi anda. Kaedah lanjutan ini hanya perlu digunakan jika anda memerlukan logik JavaScript tersuai atau mempunyai keperluan khusus yang tidak dapat dipenuhi dengan pendekatan fail konfigurasi.

Kaedah Alternatif 4: Swizzle Komponen Footer

Anda boleh menyesuaikan footer untuk menyertakan skrip:

Jalankan perintah swizzle: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Ini mencipta salinan komponen Footer dalam src/theme/Footer/
Edit komponen Footer untuk menyertakan tag skrip anda
Tambah skrip sebelum tag penutup footer
Simpan dan bina semula laman anda

Nota: Swizzling memberikan anda kawalan penuh ke atas komponen Docusaurus, tetapi ini bermakna anda perlu menyelenggara komponen tersebut sendiri. Kemas kini Docusaurus tidak akan mengemas kini komponen yang telah di-swizzle secara automatik.

Langkah 3: Bina dan Laksanakan

Selepas menambah kod, bina dan laksanakan laman Docusaurus anda:

# Build the site
npm run build

# Or with Yarn
yarn build

# Deploy to your hosting platform
# (Vercel, Netlify, GitHub Pages, etc.)

Petua: Semasa pembangunan, jalankan npm start atau yarn start untuk pratonton perubahan anda secara tempatan. Chatbot sepatutnya muncul di sudut kanan bawah pada semua halaman.

Langkah 4: Sahkan Pemasangan

Selepas melaksanakan perubahan anda, buka laman dokumentasi anda 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 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. Buka konsol pelayar (F12) untuk menyemak sebarang ralat JavaScript.

Dokumentasi