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

Οδηγός βήμα-βήμα για ιστότοπους Statamic CMS

Πλατφόρμα:

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

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

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

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

Βήμα 2: Επιλέξτε Μέθοδο Εγκατάστασης

Το Statamic υποστηρίζει τόσο Antlers όσο και Blade templating. Επιλέξτε τη μέθοδο ανάλογα με τη μηχανή templating που χρησιμοποιείτε:

Μέθοδος 1: Διάταξη Antlers (Συνιστάται)

Ο ευκολότερος τρόπος προσθήκης του chatbot είναι να το συμπεριλάβετε στο κύριο αρχείο διάταξής σας. Το Statamic χρησιμοποιεί Antlers ως προεπιλεγμένη μηχανή templating.

Μεταβείτε στον κατάλογο resources/views του έργου Statamic σας
Open your layout file (usually layout.antlers.html)
Βρείτε την ετικέτα κλεισίματος </body>
Επικολλήστε τον κωδικό ενσωμάτωσης Asyntai ακριβώς πριν από την ετικέτα </body>
Αποθηκεύστε το αρχείο

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

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

Συμβουλή: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

Μέθοδος 2: Διάταξη Blade

If you're using Blade templates instead of Antlers, follow these steps:

Μεταβείτε στον κατάλογο resources/views του έργου Statamic σας
Open your Blade layout file (e.g., layout.blade.php)
Βρείτε την ετικέτα κλεισίματος </body>
Επικολλήστε τον κωδικό ενσωμάτωσης Asyntai ακριβώς πριν από την ετικέτα </body>
Αποθηκεύστε το αρχείο

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

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

Σημείωση: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

Μέθοδος 3: Χρήση Partial

Για καλύτερη οργάνωση, μπορείτε να δημιουργήσετε ένα επαναχρησιμοποιήσιμο partial για το chatbot:

Βήμα 1: Δημιουργία του Partial

Δημιουργήστε ένα νέο αρχείο στο resources/views/partials/_chatbot.antlers.html
Προσθέστε τον κώδικα ενσωμάτωσης Asyntai σε αυτό το αρχείο:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Βήμα 2: Ενσωμάτωση στη διάταξή σας

Ανοίξτε το αρχείο διάταξής σας (layout.antlers.html)
Προσθέστε την ετικέτα partial πριν το </body>:
{{ partial:chatbot }} </body>

Γιατί να χρησιμοποιήσετε partial; Τα partials διευκολύνουν τη διαχείριση εξωτερικών scripts σε ένα μέρος. Αν χρειαστεί ποτέ να ενημερώσετε τον κώδικα του chatbot, χρειάζεται να επεξεργαστείτε μόνο ένα αρχείο.

Χρήση πολλαπλών διατάξεων

Αν ο ιστότοπος Statamic σας χρησιμοποιεί πολλαπλές διατάξεις (π.χ. διαφορετικές διατάξεις για αναρτήσεις blog, σελίδες προορισμού κ.λπ.), φροντίστε να προσθέσετε το script του chatbot σε κάθε αρχείο διάταξης όπου θέλετε να εμφανίζεται το widget.

You can set which layout a page uses in several ways:

Στην καταχώρηση: Προσθέστε layout: your_layout στο front matter
Στη συλλογή: Ορίστε μια προεπιλεγμένη διάταξη στο αρχείο ρύθμισης YAML της συλλογής σας
Σε ένα blueprint: Προσθέστε ένα πεδίο διάταξης από το οποίο μπορούν να επιλέξουν οι επεξεργαστές

Για Statamic Starter Kits

Αν χρησιμοποιείτε Statamic Starter Kit, η τοποθεσία της διάταξης ενδέχεται να διαφέρει. Συνηθισμένες τοποθεσίες περιλαμβάνουν:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html με partials στο resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Βήμα 3: Εκκαθάριση Προσωρινής Μνήμης και Επαλήθευση

Αφού προσθέσετε τον κώδικα, εκκαθαρίστε την cache του Statamic για να διασφαλίσετε ότι οι αλλαγές τίθενται σε ισχύ:

php artisan cache:clear
php please stache:refresh

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

Δεν βλέπετε το widget; Βεβαιωθείτε ότι εκκαθαρίσατε τόσο την cache του Laravel όσο και το Stache του Statamic. Αν χρησιμοποιείτε στατική cache, εκτελέστε επίσης php please static:clear. Ελέγξτε την κονσόλα του προγράμματος περιήγησης (F12) για τυχόν σφάλματα JavaScript.

Σημαντικό: Αν χρησιμοποιείτε τη γεννήτρια στατικού ιστότοπου του Statamic (ssg), φροντίστε να αναδημιουργήσετε τα στατικά αρχεία σας αφού προσθέσετε το script του chatbot, εκτελώντας php please ssg:generate.

Τεκμηρίωση