Asyntai AI -chatbotin lisääminen Hugoon

Vaiheittainen opas Hugo-staattiselle sivugeneraattorille

Alusta:

Vaihe 1: Hanki upotuskoodisi

Siirry ensin Asyntai-hallintapaneeliin ja vieritä alas "Upotuskoodi"-osioon. Kopioi yksilöllinen upotuskoodisi, joka näyttää tältä:

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

Huomautus: Yllä oleva koodi on vain esimerkki. Sinun on kopioitava oma yksilöllinen upotuskoodisi Hallintapaneelistasi, sillä se sisältää henkilökohtaisen widget-tunnuksesi.

Vaihe 2: Koodin lisääminen teeman osatemplaattiin (suositeltu)

Paras tapa lisätä chatbot kaikille Hugo-sivustosi sivuille on luoda osatemplaatti:

Siirry Hugo-projektisi layouts/partials/-hakemistoon
Luo uusi tiedosto nimeltä asyntai-widget.html
Liitä Asyntai-upotuskoodisi tähän tiedostoon:

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

Avaa teemasi baseof.html-tiedosto (yleensä sijainnissa layouts/_default/baseof.html)
Lisää osatemplaatti ennen sulkevaa </body>-tagia:

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

Tallenna tiedosto ja rakenna Hugo-sivustosi uudelleen

Vinkki: Osatemplaattien käyttö on Hugon suosittelema tapa sisällyttää uudelleenkäytettäviä komponentteja. Tämä menetelmä varmistaa, että chatbot näkyy jokaisella sivulla, joka käyttää baseof.html-templaattia, mikä on tyypillisesti kaikki sivuston sivut.

Vaihtoehtoinen menetelmä 1: Lisääminen head-osatemplaattiin

Jos teemassasi on head-osatemplaatti, voit lisätä koodin sinne:

Etsi teemasi head-osatemplaatti (yleensä layouts/partials/head.html)
Jos sitä ei ole, luo layouts/partials/head.html projektisi juurihakemistoon
Lisää Asyntai-upotuskoodisi tähän tiedostoon:

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

Varmista, että baseof.html sisältää tämän osatemplaatin <head>-osiossa:

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

Huomautus: Jos teemassasi on jo head.html-osatemplaatti, jossa on sisältöä, lisää Asyntai-koodisi sen loppuun. Älä korvaa olemassa olevaa sisältöä.

Vaihtoehtoinen menetelmä 2: Staattinen kansio mukautetulla JavaScriptillä

Modulaarisempi lähestymistapa Hugon staattista kansiota käyttäen:

Siirry Hugo-projektisi static/js/-hakemistoon
Luo hakemisto, jos sitä ei ole
Luo uusi tiedosto nimeltä asyntai-loader.js
Lisää seuraava koodi widgetin lataamiseksi:

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

Viittaa tähän tiedostoon baseof.html-tiedostossasi tai alatunnisteen osatemplaatissa ennen </body>-tagia:

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

Vinkki: Tiedostot static/-hakemistossa kopioidaan sellaisenaan julkaistun sivuston juureen. relURL-funktio luo oikean suhteellisen polun julkaisuasi varten.

Vaihtoehtoinen menetelmä 3: Hugon asetustiedosto (config.toml/yaml)

Joillekin Hugo-teemoille, jotka tukevat mukautettuja skriptejä konfiguraation kautta:

# 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

Huomautus: Tämä menetelmä toimii vain, jos teemasi tukee customJS-parametria. Tarkista teemasi dokumentaatio. Saatat myös joutua lisäämään data-asyntai-id-attribuutin teeman mukauttamisen kautta.

Vaihtoehtoinen menetelmä 4: Front Matter (sivukohtainen)

Chatbotin lisääminen vain tietyille sivuille:

Lisää mukautettu parametri sivusi front matteriin:

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

Lisää baseof.html-tiedostoon tai osatemplaattiin ehdollinen logiikka:

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

Vinkki: Tämä lähestymistapa antaa tarkan hallinnan siitä, millä sivuilla chatbot näkyy. Se on hyödyllinen dokumentaatiosivustoille, joissa haluat widgetin vain tietyissä osioissa.

Vaihtoehtoinen menetelmä 5: Teema-asettelujen ylikirjoitus

Teeman asettelun ylikirjoittaminen ilman teematiedostojen muokkausta:

Kopioi teeman baseof.html sijainnista themes/your-theme/layouts/_default/
Liitä se projektisi tiedostoon layouts/_default/baseof.html
Lisää Asyntai-upotuskoodisi ennen sulkevaa </body>-tagia
Tallenna ja rakenna sivustosi uudelleen

Tärkeää: Kun ylikirjoitat teematiedostoja, et saa niihin automaattisesti päivityksiä teeman päivittyessä. Tämä menetelmä antaa täyden hallinnan, mutta vaatii enemmän ylläpitoa. Harkitse osatemplaattien käyttöä teemapäivitysten helpottamiseksi.

Vaihe 3: Rakenna ja julkaise

Koodin lisäämisen jälkeen rakenna Hugo-sivustosi:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Luotu sivusto on public/-hakemistossa
Julkaise tämä hakemisto hosting-alustallesi (Netlify, Vercel, GitHub Pages jne.)

Vinkki: Kehityksen aikana käytä komentoa hugo server esikatsellaksesi sivustoasi paikallisesti osoitteessa http://localhost:1313. Chatbotin pitäisi näkyä oikeassa alakulmassa kaikilla sivuilla.

Vaihe 4: Vahvista asennus

Hugo-sivustosi julkaisun jälkeen avaa se uudessa selainvälilehdessä. Chat-widget-painikkeen pitäisi näkyä oikeassa alakulmassa. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein.

Etkö näe widgetiä? Varmista, että olet rakentanut sivustosi uudelleen hugo-komennolla muutosten jälkeen. Tarkista, että korvasit YOUR_WIDGET_ID todellisella widget-tunnisteellasi hallintapaneelista. Tyhjennä selaimen välimuisti tai avaa sivu incognito-tilassa. Jos käytät CDN:ää, saatat joutua tyhjentämään sen välimuistin. Avaa selaimen konsoli (F12) tarkistaaksesi mahdolliset JavaScript-virheet.

Dokumentaatio