Πώς να Προσθέσετε το AI Chatbot Asyntai στο Docusaurus

Οδηγός βήμα προς βήμα για ιστότοπους τεκμηρίωσης Docusaurus

Πλατφόρμα:

Βήμα 1: Αποκτήστε τον Κωδικό Ενσωμάτωσής σας

Πρώτα, μεταβείτε στον Πίνακα Ελέγχου Asyntai και κάντε κύλιση προς τα κάτω στην ενότητα «Κωδικός Ενσωμάτωσης». Αντιγράψτε τον μοναδικό κωδικό ενσωμάτωσής σας που θα μοιάζει ως εξής:

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

Σημείωση: Ο παραπάνω κώδικας είναι απλώς ένα παράδειγμα. Πρέπει να αντιγράψετε τον δικό σας μοναδικό κωδικό ενσωμάτωσης από τον Πίνακα Ελέγχου σας, καθώς περιέχει το προσωπικό σας αναγνωριστικό widget.

Βήμα 2: Προσθήκη Script στο docusaurus.config.js (Συνιστάται)

Ο καλύτερος τρόπος για να προσθέσετε το chatbot σε όλες τις σελίδες του ιστότοπού σας Docusaurus είναι μέσω του αρχείου διαμόρφωσης:

Ανοίξτε το έργο Docusaurus στον επεξεργαστή κώδικα
Εντοπίστε και ανοίξτε το αρχείο docusaurus.config.js στη ριζική διαδρομή του έργου
Βρείτε το αντικείμενο const config = { }
Προσθέστε ή ενημερώστε το πεδίο scripts με το widget Asyntai:

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
};

Αποθηκεύστε το αρχείο docusaurus.config.js
Ανακατασκευάστε τον ιστότοπό σας εκτελώντας npm run build ή yarn build
Επανεκκινήστε τον διακομιστή ανάπτυξης εάν εκτελείται τοπικά

Συμβουλή: Το πεδίο scripts δέχεται έναν πίνακα πηγών JavaScript. Η ετικέτα script θα εισαχθεί αυτόματα στην κεφαλίδα HTML κάθε σελίδας. Αυτή είναι η πιο καθαρή και πιο συντηρήσιμη μέθοδος για ιστότοπους Docusaurus.

Εναλλακτική Μέθοδος 1: Μορφή Συμβολοσειράς (Απλούστερη Σύνταξη)

Εάν προτιμάτε μια απλούστερη προσέγγιση, μπορείτε να χρησιμοποιήσετε μορφή συμβολοσειράς στον πίνακα scripts:

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

Σημείωση: Κατά τη χρήση μορφής συμβολοσειράς, θα χρειαστεί να τροποποιήσετε τη διεύθυνση URL του script για να συμπεριλάβετε το αναγνωριστικό widget ως παράμετρο ερωτήματος, ή να χρησιμοποιήσετε τη μορφή αντικειμένου που εμφανίζεται στο Βήμα 2, η οποία σας επιτρέπει να ορίσετε απευθείας το χαρακτηριστικό data-asyntai-id.

Εναλλακτική Μέθοδος 2: Προσαρμοσμένες Ετικέτες Head

Μπορείτε επίσης να προσθέσετε το script χρησιμοποιώντας το πεδίο headTags στο 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,
      },
    },
  ],
};

Συμβουλή: Το πεδίο headTags παρέχει μεγαλύτερο έλεγχο επί των ακριβών ετικετών HTML που εισάγονται στην ενότητα <head>. Αυτή η μέθοδος είναι λειτουργικά ισοδύναμη με τη χρήση του πεδίου scripts.

Εναλλακτική Μέθοδος 3: Προσαρμοσμένο Πρότυπο HTML (Για Προχωρημένους)

Για προχωρημένους χρήστες που χρειάζονται πλήρη έλεγχο του προτύπου HTML:

Δημιουργήστε έναν νέο κατάλογο: src/theme (εάν δεν υπάρχει)
Δημιουργήστε ένα αρχείο: src/theme/Root.js
Προσθέστε τον παρακάτω κώδικα για δυναμική έγχυση του script:

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

Αποθηκεύστε το αρχείο και ανακατασκευάστε τον ιστότοπό σας

Σημαντικό: Το στοιχείο Root.js τυλίγει ολόκληρη την εφαρμογή σας. Αυτή η προχωρημένη μέθοδος πρέπει να χρησιμοποιείται μόνο εάν χρειάζεστε προσαρμοσμένη λογική JavaScript ή έχετε ειδικές απαιτήσεις που δεν μπορούν να εκπληρωθούν με την προσέγγιση του αρχείου διαμόρφωσης.

Εναλλακτική Μέθοδος 4: Swizzle Στοιχείου Footer

Μπορείτε να προσαρμόσετε το υποσέλιδο για να συμπεριλάβετε το script:

Εκτελέστε την εντολή swizzle: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Αυτό δημιουργεί ένα αντίγραφο του στοιχείου Footer στο src/theme/Footer/
Επεξεργαστείτε το στοιχείο Footer για να συμπεριλάβετε την ετικέτα script
Προσθέστε το script πριν την ετικέτα κλεισίματος του υποσέλιδου
Αποθηκεύστε και ανακατασκευάστε τον ιστότοπό σας

Σημείωση: Το swizzling σας δίνει πλήρη έλεγχο επί των στοιχείων Docusaurus, αλλά σημαίνει ότι θα χρειαστεί να συντηρείτε αυτό το στοιχείο μόνοι σας. Οι ενημερώσεις στο Docusaurus δεν θα ενημερώνουν αυτόματα τα swizzled στοιχεία.

Βήμα 3: Κατασκευή και Ανάπτυξη

Αφού προσθέσετε τον κώδικα, δημιουργήστε και αναπτύξτε τον ιστότοπο Docusaurus σας:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Συμβουλή: Κατά την ανάπτυξη, εκτελέστε npm start ή yarn start για προεπισκόπηση των αλλαγών τοπικά. Το chatbot θα πρέπει να εμφανίζεται στην κάτω δεξιά γωνία σε όλες τις σελίδες.

Βήμα 4: Επαλήθευση Εγκατάστασης

Αφού αναπτύξετε τις αλλαγές σας, ανοίξτε τον ιστότοπο τεκμηρίωσης σε μια νέα καρτέλα του προγράμματος περιήγησης. Θα πρέπει να δείτε το κουμπί του chat widget στην κάτω δεξιά γωνία. Κάντε κλικ για να βεβαιωθείτε ότι ανοίγει και λειτουργεί σωστά.

Δεν βλέπετε το widget; Βεβαιωθείτε ότι έχετε ανακατασκευάσει τον ιστότοπό σας μετά τις αλλαγές. Ελέγξτε ότι αντικαταστήσατε το YOUR_WIDGET_ID με το πραγματικό αναγνωριστικό widget από τον πίνακα ελέγχου. Εκκαθαρίστε την κρυφή μνήμη του προγράμματος περιήγησης ή δείτε σε ανώνυμη λειτουργία. Ανοίξτε την κονσόλα του προγράμματος περιήγησης (F12) για να ελέγξετε για τυχόν σφάλματα JavaScript.

Τεκμηρίωση