Jak dodać chatbota AI Asyntai do Hugo

Przewodnik krok po kroku dla generatora stron statycznych Hugo

Platforma:

Krok 1: Pobierz swój kod osadzania

Najpierw przejdź do swojego Panelu Asyntai i przewiń w dół do sekcji "Kod osadzania". Skopiuj swój unikalny kod osadzania, który będzie wyglądał tak:

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

Uwaga: Powyższy kod to tylko przykład. Musisz skopiować swój własny unikalny kod osadzania z Panelu, ponieważ zawiera on Twój osobisty identyfikator widgetu.

Krok 2: Dodaj kod do fragmentu szablonu (zalecane)

Najlepszym sposobem na dodanie chatbota do wszystkich stron witryny Hugo jest utworzenie fragmentu szablonu (partial):

Przejdź do katalogu layouts/partials/ w swoim projekcie Hugo
Utwórz nowy plik o nazwie asyntai-widget.html
Wklej swój kod osadzania Asyntai do tego pliku:

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

Otwórz plik baseof.html swojego motywu (zwykle w layouts/_default/baseof.html)
Dodaj fragment szablonu przed zamykającym znacznikiem </body>:

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

Zapisz plik i przebuduj swoją witrynę Hugo

Wskazówka: Użycie fragmentow szablonu (partials) to zalecany przez Hugo sposób na dolaczanie komponentow wielokrotnego uzytku. Ta metoda zapewnia, ze chatbot pojawi sie na każdej stronie korzystajacej z szablonu baseof.html, czyli zazwyczaj na wszystkich stronach witryny.

Metoda alternatywna 1: Dodaj do fragmentu Head

Jeśli Twój motyw ma fragment szablonu head, możesz dodać tam kod:

Znajdź fragment szablonu head swojego motywu (zwykle layouts/partials/head.html)
Jeśli nie istnieje, utwórz layouts/partials/head.html w katalogu głównym projektu
Dodaj kod osadzania Asyntai do tego pliku:

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

Upewnij sie, ze plik baseof.html zawiera ten fragment szablonu w sekcji <head>:

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

Uwaga: Jeśli Twój motyw ma juz fragment szablonu head.html z istniejaca zawartoscia, po prostu dopisz swoj kod Asyntai na końcu. Nie zastepuj istniejacej zawartości.

Metoda alternatywna 2: Folder static z niestandardowym plikiem JavaScript

Dla bardziej modularnego podejścia z użyciem folderu static Hugo:

Przejdź do katalogu static/js/ w swoim projekcie Hugo
Utwórz katalog, jeśli nie istnieje
Utwórz nowy plik o nazwie asyntai-loader.js
Dodaj następujący kod, aby załadować 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);
})();

Odwolaj sie do tego pliku w pliku baseof.html lub fragmencie stopki przed </body>:

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

Wskazówka: Pliki w katalogu static/ sa kopiowane bez zmian do katalogu głównego opublikowanej witryny. Funkcja relURL generuje prawidlowa ścieżkę względna dla Twojego wdrozenia.

Metoda alternatywna 3: Konfiguracja Hugo (config.toml/yaml)

Dla niektórych motywów Hugo obsługujących niestandardowe skrypty przez konfigurację:

# 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

Uwaga: Ta metoda działa tylko wtedy, gdy Twój motyw obsługuje parametr customJS. Sprawdź dokumentacje swojego motywu. Może byc również konieczne dodanie atrybutu data-asyntai-id poprzez dostosowanie motywu.

Metoda alternatywna 4: Front Matter (dla konkretnej strony)

Aby dodać chatbota tylko do wybranych stron:

Dodaj niestandardowy parametr do sekcji front matter strony:

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

W pliku baseof.html lub fragmencie szablonu dodaj logikę warunkową:

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

Wskazówka: To podejście daje Ci szczegolowa kontrolę nad tym, które strony zawieraja chatbota. Jest przydatne w przypadku witryn dokumentacyjnych, gdzie chcesz mieć widget tylko w określonych sekcjach.

Metoda alternatywna 5: Nadpisanie układów motywu

Aby nadpisać układ motywu bez modyfikowania plików motywu:

Skopiuj plik baseof.html motywu z themes/your-theme/layouts/_default/
Wklej go do layouts/_default/baseof.html w swoim projekcie
Dodaj swoj kod osadzania Asyntai przed zamykającym tagiem </body>
Zapisz i przebuduj witrynę

Ważne: Gdy nadpisujesz pliki motywu, nie bedziesz automatycznie otrzymywac aktualizacji tych plików po aktualizacji motywu. Ta metoda daje pełna kontrolę, ale wymaga wiekszej konserwacji. Rozważ użycie fragmentow szablonu (partials) dla latwiejszych aktualizacji motywu.

Krok 3: Budowanie i wdrożenie

Po dodaniu kodu zbuduj swoją witrynę Hugo:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Wygenerowana witryna będzie w katalogu public/
Wdróż ten katalog na swojej platformie hostingowej (Netlify, Vercel, GitHub Pages itp.)

Wskazówka: Podczas programowania użyj hugo server, aby wyświetlić podglad witryny lokalnie pod adresem http://localhost:1313. Chatbot powinien pojawic sie w prawym dolnym rogu na wszystkich stronach.

Krok 4: Weryfikacja instalacji

Po wdrozeniu witryny Hugo otwórz ja w nowej karcie przeglądarki. Powinieneś zobaczyć przycisk widgetu czatu w prawym dolnym rogu. Kliknij go, aby upewnić sie, ze otwiera sie i działa poprawnie.

Nie widzisz widgetu? Upewnij sie, ze przebudowales witrynę za pomocą polecenia hugo po wprowadzeniu zmian. Sprawdź, czy zamieniles YOUR_WIDGET_ID na swoj rzeczywisty identyfikator widgetu z panelu. Wyczyść pamięć podręczna przeglądarki lub wyświetl stronę w trybie incognito. Jeśli korzystasz z CDN, może byc konieczne uniewazniene pamięci podręcznej. Otwórz konsolę przeglądarki (F12), aby sprawdzic, czy nie wystapily błędy JavaScript.

Dokumentacja