Cum să adăugați Chatbot-ul AI Asyntai în Hugo

Ghid pas cu pas pentru generatorul de site-uri statice Hugo

Platformă:

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați Tabloul de bord Asyntai și derulați în jos până la secțiunea "Cod de încorporare". Copiați codul unic de încorporare care va arăta astfel:

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

Notă: Codul de mai sus este doar un exemplu. Trebuie să copiați propriul cod unic de încorporare din Tabloul de bord, deoarece conține ID-ul personal al widgetului dvs.

Pasul 2: Adăugați codul în partial-ul temei (Recomandat)

Cel mai bun mod de a adăuga chatbot-ul pe toate paginile site-ului Hugo este prin crearea unui partial:

Navigați la directorul layouts/partials/ al proiectului Hugo
Creați un fișier nou numit asyntai-widget.html
Lipiți codul de integrare Asyntai în acest fișier:

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

Deschideți fișierul baseof.html al temei (de obicei în layouts/_default/baseof.html)
Adăugați partial-ul înainte de eticheta de închidere </body>:

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

Salvați fișierul și reconstruiți site-ul Hugo

Sfat: Utilizarea partial-urilor este modul recomandat de Hugo pentru a include componente reutilizabile. Această metodă asigură că chatbot-ul apare pe fiecare pagină care folosește șablonul baseof.html, care este de obicei toate paginile site-ului.

Metoda alternativă 1: Adăugați în partial-ul Head

Dacă tema dvs. are un partial head, puteți adăuga codul acolo:

Localizați partial-ul head al temei (de obicei layouts/partials/head.html)
Dacă nu există, creați layouts/partials/head.html în rădăcina proiectului
Adăugați codul de integrare Asyntai în acest fișier:

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

Asigurați-vă că baseof.html include acest partial în secțiunea <head>:

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

Notă: Dacă tema dvs. are deja un partial head.html cu conținut existent, pur și simplu adăugați codul Asyntai la acesta. Nu înlocuiți conținutul existent.

Metoda alternativă 2: Folder static cu JavaScript personalizat

Pentru o abordare mai modulară folosind folderul static Hugo:

Navigați la directorul static/js/ al proiectului Hugo
Creați directorul dacă nu există
Creați un fișier nou numit asyntai-loader.js
Adăugați următorul cod pentru a încărca widget-ul:

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

Referențiați acest fișier în baseof.html sau partial-ul footer înainte de </body>:

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

Sfat: Fișierele din directorul static/ sunt copiate ca atare în rădăcina site-ului publicat. Funcția relURL generează calea relativă corectă pentru implementarea dvs.

Metoda alternativă 3: Configurare Hugo (config.toml/yaml)

Pentru unele teme Hugo care acceptă scripturi personalizate prin configurare:

# 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

Notă: Această metodă funcționează doar dacă tema dvs. suportă parametrul customJS. Verificați documentația temei. Este posibil să fie nevoie să adăugați și atributul data-asyntai-id prin personalizarea temei.

Metoda alternativă 4: Front Matter (Specifică paginii)

Pentru a adăuga chatbot-ul doar pe pagini specifice:

Adăugați un parametru personalizat în front matter-ul paginii:

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

În baseof.html sau partial, adăugați logică condiționată:

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

Sfat: Această abordare vă oferă control granular asupra paginilor care includ chatbot-ul. Este utilă pentru site-urile de documentație unde doriți widget-ul doar pe anumite secțiuni.

Metoda alternativă 5: Suprascrierea layout-urilor temei

Pentru a suprascrie layout-ul temei fără a modifica fișierele temei:

Copiați baseof.html al temei din themes/your-theme/layouts/_default/
Lipiți-l în layouts/_default/baseof.html al proiectului dvs.
Adăugați codul de integrare Asyntai înainte de eticheta de închidere </body>
Salvați și reconstruiți site-ul

Important: Când suprascrieți fișierele temei, nu veți primi automat actualizări ale acelor fișiere când tema este actualizată. Această metodă vă oferă control complet, dar necesită mai multă întreținere. Luați în considerare utilizarea partial-urilor pentru actualizări mai ușoare ale temei.

Pasul 3: Construiți și implementați

După adăugarea codului, construiți site-ul Hugo:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Site-ul generat va fi în directorul public/
Implementați acest director pe platforma dvs. de găzduire (Netlify, Vercel, GitHub Pages, etc.)

Sfat: În timpul dezvoltării, utilizați hugo server pentru a previzualiza site-ul local la http://localhost:1313. Chatbot-ul ar trebui să apară în colțul din dreapta jos pe toate paginile.

Pasul 4: Verificați instalarea

După implementarea site-ului Hugo, deschideți-l într-o filă nouă de browser. Ar trebui să vedeți butonul widget-ului de chat în colțul din dreapta jos. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect.

Nu vedeți widgetul? Asigurați-vă că ați reconstruit site-ul cu comanda hugo după ce ați făcut modificări. Verificați că ați înlocuit YOUR_WIDGET_ID cu ID-ul real al widget-ului din tabloul de bord. Goliți cache-ul browserului sau vizualizați în modul incognito. Dacă utilizați un CDN, este posibil să fie nevoie să invalidați cache-ul. Deschideți consola browserului (F12) pentru a verifica eventualele erori JavaScript.

Documentație