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

Οδηγός βήμα προς βήμα για τη στατική γεννήτρια ιστότοπου Hugo

Πλατφόρμα:

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

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

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

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

Βήμα 2: Προσθήκη κώδικα σε Partial θέματος (Συνιστάται)

Ο καλύτερος τρόπος για να προσθέσετε το chatbot σε όλες τις σελίδες του ιστότοπου Hugo είναι δημιουργώντας ένα partial:

Μεταβείτε στον κατάλογο layouts/partials/ του έργου Hugo σας
Δημιουργήστε ένα νέο αρχείο με όνομα asyntai-widget.html
Επικολλήστε τον κώδικα ενσωμάτωσης Asyntai σε αυτό το αρχείο:

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

Ανοίξτε το αρχείο baseof.html του θέματός σας (συνήθως στο layouts/_default/baseof.html)
Προσθέστε τον κώδικα ενσωμάτωσης ακριβώς πριν την ετικέτα κλεισίματος </body>:

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

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

Συμβουλή: Η χρήση partials είναι η προτεινόμενη από το Hugo μέθοδος για τη συμπερίληψη επαναχρησιμοποιήσιμων στοιχείων. Αυτή η μέθοδος διασφαλίζει ότι το chatbot εμφανίζεται σε κάθε σελίδα που χρησιμοποιεί το πρότυπο baseof.html, που είναι συνήθως όλες οι σελίδες του ιστότοπού σας.

Εναλλακτική μέθοδος 1: Προσθήκη στο Head Partial

Εάν το θέμα σας έχει ένα head partial, μπορείτε να προσθέσετε τον κώδικα εκεί:

Εντοπίστε το head partial του θέματός σας (συνήθως layouts/partials/head.html)
Εάν δεν υπάρχει, δημιουργήστε layouts/partials/head.html στον ριζικό κατάλογο του έργου σας
Προσθέστε τον κώδικα ενσωμάτωσης Asyntai σε αυτό το αρχείο:

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

Βεβαιωθείτε ότι το baseof.html σας συμπεριλαμβάνει αυτό το partial στην ενότητα <head>:

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

Σημείωση: Εάν το θέμα σας έχει ήδη ένα head.html partial με υπάρχον περιεχόμενο, απλώς επισυνάψτε τον κώδικα Asyntai σε αυτό. Μην αντικαταστήσετε το υπάρχον περιεχόμενο.

Εναλλακτική μέθοδος 2: Στατικός φάκελος με προσαρμοσμένη JavaScript

Για μια πιο αρθρωτή προσέγγιση χρησιμοποιώντας τον στατικό φάκελο του Hugo:

Μεταβείτε στον κατάλογο static/js/ του έργου Hugo σας
Δημιουργήστε τον κατάλογο εάν δεν υπάρχει
Δημιουργήστε ένα νέο αρχείο με όνομα asyntai-loader.js
Προσθέστε τον παρακάτω κώδικα για να φορτώσετε το 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);
})();

Αναφερθείτε σε αυτό το αρχείο στο baseof.html ή το footer partial πριν από </body>:

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

Συμβουλή: Τα αρχεία στον κατάλογο static/ αντιγράφονται ως έχουν στον ριζικό κατάλογο του δημοσιευμένου ιστότοπού σας. Η συνάρτηση relURL δημιουργεί τη σωστή σχετική διαδρομή για την ανάπτυξή σας.

Εναλλακτική μέθοδος 3: Διαμόρφωση Hugo (config.toml/yaml)

Για ορισμένα θέματα Hugo που υποστηρίζουν προσαρμοσμένα script μέσω ρυθμίσεων:

# 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

Σημείωση: Αυτή η μέθοδος λειτουργεί μόνο εάν το θέμα σας υποστηρίζει την παράμετρο customJS. Ελέγξτε την τεκμηρίωση του θέματός σας. Ενδέχεται επίσης να χρειαστεί να προσθέσετε το χαρακτηριστικό data-asyntai-id μέσω της προσαρμογής θέματος.

Εναλλακτική Μέθοδος 4: Front Matter (Ανά Σελίδα)

Για να προσθέσετε το chatbot μόνο σε συγκεκριμένες σελίδες:

Προσθέστε μια προσαρμοσμένη παράμετρο στο front matter της σελίδας σας:

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

Στο αρχείο baseof.html ή partial σας, προσθέστε λογική υπό συνθήκη:

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

Συμβουλή: Αυτή η προσέγγιση σάς δίνει λεπτομερή έλεγχο για το ποιες σελίδες περιλαμβάνουν το chatbot. Είναι χρήσιμη για ιστότοπους τεκμηρίωσης όπου θέλετε το widget μόνο σε συγκεκριμένες ενότητες.

Εναλλακτική Μέθοδος 5: Παράκαμψη Διατάξεων Θέματος

Για να αντικαταστήσετε τη διάταξη θέματος χωρίς τροποποίηση αρχείων θέματος:

Αντιγράψτε το baseof.html του θέματος από τον φάκελο themes/your-theme/layouts/_default/
Επικολλήστε το στο layouts/_default/baseof.html του έργου σας
Προσθέστε τον κώδικα ενσωμάτωσης Asyntai πριν από την ετικέτα κλεισίματος </body>
Αποθηκεύστε και ανακατασκευάστε τον ιστότοπό σας

Σημαντικό: Όταν παρακάμπτετε αρχεία θέματος, δεν θα λαμβάνετε αυτόματα ενημερώσεις για αυτά τα αρχεία όταν ενημερώνεται το θέμα. Αυτή η μέθοδος σάς δίνει πλήρη έλεγχο, αλλά απαιτεί περισσότερη συντήρηση. Εξετάστε το ενδεχόμενο να χρησιμοποιήσετε partials για ευκολότερες ενημερώσεις θέματος.

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

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

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Ο παραγόμενος ιστότοπος θα βρίσκεται στον κατάλογο public/
Αναπτύξτε αυτόν τον κατάλογο στην πλατφόρμα φιλοξενίας σας (Netlify, Vercel, GitHub Pages κ.λπ.)

Συμβουλή: Κατά την ανάπτυξη, χρησιμοποιήστε hugo server για προεπισκόπηση του ιστότοπού σας τοπικά στη διεύθυνση http://localhost:1313. Το chatbot θα πρέπει να εμφανίζεται στην κάτω δεξιά γωνία σε όλες τις σελίδες.

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

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

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

Τεκμηρίωση