Az Asyntai AI Chatbot hozzáadása a Hugo-hoz

Lépésről lépésre útmutató a Hugo statikus weboldal-generátorhoz

Platform:

1. lépés: Szerezze be a beágyazási kódját

Először lépjen az Asyntai Irányítópultra és görgessen le a „Beágyazási kód" szekcióhoz. Másolja le az egyedi beágyazási kódját, amely így fog kinézni:

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

Megjegyzés: A fenti kód csak egy példa. Le kell másolnia saját egyedi beágyazási kódját az Irányítópultról, mivel az tartalmazza személyes widget-azonosítóját.

2. lépés: Kód hozzáadása téma részlethez (ajánlott)

A legjobb módszer a chatbot hozzáadásához a Hugo webhely összes oldalára egy részlet létrehozása:

Navigáljon a Hugo projekt layouts/partials/ könyvtárába
Hozzon létre egy új asyntai-widget.html nevű fájlt
Illessze be az Asyntai beágyazási kódot ebbe a fájlba:

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

Nyissa meg a téma baseof.html fájlját (általában a layouts/_default/baseof.html helyen)
Adja hozzá a részletet a záró </body> tag elé:

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

Mentse el a fájlt, és építse újra Hugo weboldalát

Tipp: A részletek használata a Hugo által ajánlott módszer az újrafelhasználható komponensek befoglalására. Ez a módszer biztosítja, hogy a chatbot megjelenjen minden oldalon, amely a baseof.html sablont használja, ami általában a webhely összes oldala.

1. alternatív módszer: Hozzáadás a head részlethez

Ha a téma rendelkezik head részlettel, ott is hozzáadhatja a kódot:

Keresse meg a téma head részletét (általában layouts/partials/head.html)
Ha nem létezik, hozzon létre layouts/partials/head.html fájlt a projekt gyökerében
Adja hozzá az Asyntai beágyazási kódot ehhez a fájlhoz:

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

Győződjön meg arról, hogy a baseof.html tartalmazza ezt a részletet a <head> részben:

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

Megjegyzés: Ha a téma már rendelkezik meglévő tartalommal rendelkező head.html részlettel, egyszerűen fűzze hozzá az Asyntai kódot. Ne cserélje ki a meglévő tartalmat.

2. alternatív módszer: Statikus mappa egyéni JavaScripttel

Modulárisabb megközelítéshez a Hugo statikus mappájának használatával:

Navigáljon a Hugo projekt static/js/ könyvtárába
Hozza létre a könyvtárat, ha nem létezik
Hozzon létre egy új asyntai-loader.js nevű fájlt
Adja hozzá a következő kódot a widget betöltéséhez:

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

Hivatkozzon erre a fájlra a baseof.html-ben vagy a lábléc részletben a </body> előtt:

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

Tipp: A static/ könyvtárban lévő fájlok változtatás nélkül kerülnek a közzétett webhely gyökerébe. A relURL függvény a telepítéshez megfelelő relatív elérési utat generálja.

3. alternatív módszer: Hugo konfiguráció (config.toml/yaml)

Néhány Hugo téma esetén, amelyek támogatják az egyéni szkripteket konfiguráción keresztül:

# 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

Megjegyzés: Ez a módszer csak akkor működik, ha a téma támogatja a customJS paramétert. Ellenőrizze a téma dokumentációját. Előfordulhat, hogy a data-asyntai-id attribútumot is hozzá kell adnia a téma testreszabásán keresztül.

4. alternatív módszer: Front Matter (oldalspecifikus)

A chatbot csak egyes oldalakhoz való hozzáadásához:

Adjon hozzá egy egyéni paramétert az oldal front matter-éhez:

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

A baseof.html-ben vagy a részletben adjon hozzá feltételes logikát:

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

Tipp: Ez a megközelítés részletes kontrollt ad a felett, hogy mely oldalak tartalmazzák a chatbotot. Hasznos dokumentációs oldalakhoz, ahol csak bizonyos részeken szeretné a widgetet.

5. alternatív módszer: Téma elrendezések felülírása

A téma elrendezésének felülírásához a témafájlok módosítása nélkül:

Másolja a téma baseof.html fájlját a themes/your-theme/layouts/_default/ helyről
Illessze be a projekt layouts/_default/baseof.html fájljába
Adja hozzá az Asyntai beágyazási kódot a záró </body> tag elé
Mentse el, és építse újra a webhelyet

Fontos: Ha felülírja a témafájlokat, nem kapja meg automatikusan a fájlok frissítéseit a téma frissítésekor. Ez a módszer teljes kontrollt ad, de több karbantartást igényel. Fontolja meg a részletek használatát a könnyebb témafrissítések érdekében.

3. lépés: Fordítás és telepítés

A kód hozzáadása után építse meg Hugo weboldalát:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

A generált webhely a public/ könyvtárban lesz
Telepítse ezt a könyvtárat a tárhely platformjára (Netlify, Vercel, GitHub Pages stb.)

Tipp: Fejlesztés közben a hugo server paranccsal tekintheti meg weboldalát helyileg a http://localhost:1313 címen. A chatbotnak meg kell jelennie a jobb alsó sarokban minden oldalon.

4. lépés: Telepítés ellenőrzése

A Hugo webhely telepítése után nyissa meg egy új böngészőlapon. Látnia kell a chat widget gombot a jobb alsó sarokban. Kattintson rá, hogy meggyőződjön arról, hogy megfelelően nyílik meg és működik.

Nem látja a widgetet? Győződjön meg arról, hogy újraépítette weboldalát a hugo paranccsal a változtatások elvégzése után. Ellenőrizze, hogy a YOUR_WIDGET_ID értéket a tényleges widget-azonosítójára cserélte-e az irányítópultról. Törölje a böngésző gyorsítótárát, vagy tekintse meg inkognító módban. CDN használata esetén előfordulhat, hogy érvénytelenítenie kell a gyorsítótárat. Nyissa meg a böngésző konzolját (F12) a JavaScript-hibák ellenőrzéséhez.

Dokumentáció