So fügen Sie den Asyntai-KI-Chatbot zu Hugo hinzu

Schritt-für-Schritt-Anleitung für den statischen Website-Generator Hugo

Plattform:

Schritt 1: Ihren Einbettungscode erhalten

Gehen Sie zunächst zu Ihrem Asyntai Dashboard und scrollen Sie zum Abschnitt "Einbettungscode". Kopieren Sie Ihren einzigartigen Einbettungscode, der so aussieht:

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

Hinweis: Der obige Code ist nur ein Beispiel. Sie müssen Ihren eigenen einzigartigen Einbettungscode von Ihrem Dashboard kopieren, da er Ihre persönliche Widget-ID enthält.

Schritt 2: Code zum Theme-Partial hinzufügen (Empfohlen)

Der beste Weg, den Chatbot auf allen Seiten Ihrer Hugo-Website hinzuzufügen, ist die Erstellung eines Partials:

Navigieren Sie zum Verzeichnis layouts/partials/ Ihres Hugo-Projekts
Erstellen Sie eine neue Datei namens asyntai-widget.html
Fügen Sie Ihren Asyntai-Einbettungscode in diese Datei ein:

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

Öffnen Sie die Datei baseof.html Ihres Themes (normalerweise in layouts/_default/baseof.html)
Fügen Sie das Partial vor dem schließenden </body>-Tag ein:

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

Speichern Sie die Datei und erstellen Sie Ihre Hugo-Website neu

Tipp: Die Verwendung von Partials ist die von Hugo empfohlene Methode, um wiederverwendbare Komponenten einzubinden. Diese Methode stellt sicher, dass der Chatbot auf jeder Seite erscheint, die die baseof.html-Vorlage verwendet, was in der Regel alle Seiten Ihrer Website sind.

Alternative Methode 1: Zum Head-Partial hinzufügen

Wenn Ihr Theme ein Head-Partial hat, können Sie den Code dort hinzufügen:

Suchen Sie das Head-Partial Ihres Themes (normalerweise layouts/partials/head.html)
Falls es nicht existiert, erstellen Sie layouts/partials/head.html in Ihrem Projektstammverzeichnis
Fügen Sie Ihren Asyntai-Einbettungscode zu dieser Datei hinzu:

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

Stellen Sie sicher, dass Ihre baseof.html dieses Partial im <head>-Bereich einbindet:

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

Hinweis: Wenn Ihr Theme bereits ein head.html-Partial mit vorhandenem Inhalt hat, fügen Sie einfach Ihren Asyntai-Code daran an. Ersetzen Sie nicht den vorhandenen Inhalt.

Alternative Methode 2: Statischer Ordner mit benutzerdefiniertem JavaScript

Für einen modularen Ansatz mit Hugos statischem Ordner:

Navigieren Sie zum static/js/-Verzeichnis Ihres Hugo-Projekts
Erstellen Sie das Verzeichnis, falls es nicht existiert
Erstellen Sie eine neue Datei namens asyntai-loader.js
Fügen Sie den folgenden Code hinzu, um das Widget zu laden:

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

Referenzieren Sie diese Datei in Ihrer baseof.html oder im Footer-Partial vor </body>:

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

Tipp: Dateien im Verzeichnis static/ werden unverändert in das Stammverzeichnis Ihrer veröffentlichten Website kopiert. Die relURL-Funktion generiert den korrekten relativen Pfad für Ihre Bereitstellung.

Alternative Methode 3: Hugo-Konfiguration (config.toml/yaml)

Für einige Hugo-Themes, die benutzerdefinierte Skripte über die Konfiguration unterstützen:

# 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

Hinweis: Diese Methode funktioniert nur, wenn Ihr Theme den Parameter customJS unterstützt. Überprüfen Sie die Dokumentation Ihres Themes. Möglicherweise müssen Sie das Attribut data-asyntai-id auch über die Theme-Anpassung hinzufügen.

Alternative Methode 4: Front Matter (seitenspezifisch)

Um den Chatbot nur auf bestimmten Seiten hinzuzufügen:

Fügen Sie einen benutzerdefinierten Parameter zum Front Matter Ihrer Seite hinzu:

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

Fügen Sie in Ihrer baseof.html oder Ihrem Partial bedingte Logik hinzu:

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

Tipp: Dieser Ansatz gibt Ihnen detaillierte Kontrolle darüber, welche Seiten den Chatbot enthalten. Er ist nützlich für Dokumentationsseiten, auf denen Sie das Widget nur in bestimmten Bereichen anzeigen möchten.

Alternative Methode 5: Theme-Layouts überschreiben

Um das Layout Ihres Themes zu überschreiben, ohne Theme-Dateien zu ändern:

Kopieren Sie die baseof.html des Themes aus themes/your-theme/layouts/_default/
Fügen Sie sie in layouts/_default/baseof.html Ihres Projekts ein
Fügen Sie Ihren Asyntai-Einbettungscode vor dem schließenden </body>-Tag hinzu
Speichern Sie und erstellen Sie Ihre Website neu

Wichtig: Wenn Sie Theme-Dateien überschreiben, erhalten Sie keine automatischen Aktualisierungen dieser Dateien, wenn das Theme aktualisiert wird. Diese Methode gibt Ihnen volle Kontrolle, erfordert aber mehr Wartung. Erwägen Sie stattdessen die Verwendung von Partials für einfachere Theme-Updates.

Schritt 3: Erstellen und Bereitstellen

Erstellen Sie nach dem Hinzufügen des Codes Ihre Hugo-Website:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Die generierte Website befindet sich im Verzeichnis public/
Stellen Sie dieses Verzeichnis auf Ihrer Hosting-Plattform bereit (Netlify, Vercel, GitHub Pages usw.)

Tipp: Verwenden Sie während der Entwicklung hugo server, um Ihre Website lokal unter http://localhost:1313 in der Vorschau anzuzeigen. Der Chatbot sollte in der unteren rechten Ecke auf allen Seiten erscheinen.

Schritt 4: Installation überprüfen

Öffnen Sie nach der Bereitstellung Ihrer Hugo-Website diese in einem neuen Browser-Tab. Sie sollten den Chat-Widget-Button in der unteren rechten Ecke sehen. Klicken Sie darauf, um sicherzustellen, dass er sich öffnet und korrekt funktioniert.

Widget nicht sichtbar? Stellen Sie sicher, dass Sie Ihre Website nach Änderungen mit dem Befehl hugo neu erstellt haben. Überprüfen Sie, ob Sie YOUR_WIDGET_ID durch Ihre tatsächliche Widget-ID aus dem Dashboard ersetzt haben. Leeren Sie Ihren Browser-Cache oder verwenden Sie den Inkognito-Modus. Bei Verwendung eines CDN müssen Sie möglicherweise den Cache invalidieren. Öffnen Sie die Browser-Konsole (F12), um auf JavaScript-Fehler zu prüfen.