Kaip pridėti Asyntai DI pokalbių robotą prie Hugo

Žingsnis po žingsnio vadovas Hugo statinių svetainių generatoriui

Platforma:

1 žingsnis: Gaukite savo įterpimo kodą

Pirma, eikite į savo Asyntai valdymo skydelį ir slinkite žemyn iki "Įterpimo kodas" skyriaus. Nukopijuokite savo unikalų įterpimo kodą, kuris atrodys taip:

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

Pastaba: Aukščiau pateiktas kodas yra tik pavyzdys. Turite nukopijuoti savo unikalų įterpimo kodą iš savo Valdymo skydelio, nes jame yra jūsų asmeninis valdiklio ID.

2 žingsnis: Pridėkite kodą prie temos dalies (Rekomenduojama)

Geriausias būdas pridėti pokalbių robotą prie visų Hugo svetainės puslapių yra sukurti dalį:

Eikite į Hugo projekto layouts/partials/ katalogą
Sukurkite naują failą pavadinimu asyntai-widget.html
Įklijuokite savo Asyntai įterpimo kodą į šį failą:

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

Atidarykite temos baseof.html failą (paprastai layouts/_default/baseof.html)
Pridėkite dalį prieš uždaromąjį </body> žymą:

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

Išsaugokite failą ir perkurkite Hugo svetainę

Patarimas: Dalių naudojimas yra Hugo rekomenduojamas būdas įtraukti pakartotinai naudojamus komponentus. Šis metodas užtikrina, kad pokalbių robotas bus rodomas kiekviename puslapyje, naudojančiame baseof.html šabloną, o tai paprastai yra visi svetainės puslapiai.

Alternatyvus metodas 1: Pridėkite prie antraštės dalies

Jei tema turi antraštės dalį, galite pridėti kodą ten:

Raskite temos antraštės dalį (paprastai layouts/partials/head.html)
Jei jos nėra, sukurkite layouts/partials/head.html projekto šaknyje
Pridėkite savo Asyntai įterpimo kodą į šį failą:

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

Įsitikinkite, kad baseof.html įtraukia šią dalį <head> skyriuje:

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

Pastaba: Jei tema jau turi head.html dalį su esamu turiniu, tiesiog pridėkite savo Asyntai kodą prie jo. Nepakeiskite esamo turinio.

Alternatyvus metodas 2: Statinis aplankas su pasirinktiniu JavaScript

Moduliaresniam požiūriui naudojant Hugo statinį aplanką:

Eikite į Hugo projekto static/js/ katalogą
Sukurkite katalogą, jei jo nėra
Sukurkite naują failą pavadinimu asyntai-loader.js
Pridėkite šį kodą valdikliui įkelti:

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

Nurodykite šį failą baseof.html arba poraštės dalyje prieš </body>:

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

Patarimas: Failai static/ kataloge kopijuojami tokie, kokie yra, į publikuotos svetainės šaknį. relURL funkcija generuoja teisingą santykinį kelią jūsų diegimui.

Alternatyvus metodas 3: Hugo konfigūracija (config.toml/yaml)

Kai kurioms Hugo temoms, palaikančioms pasirinktinius skriptus per konfigūraciją:

# 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

Pastaba: Šis metodas veikia tik jei tema palaiko customJS parametrą. Patikrinkite temos dokumentaciją. Taip pat gali reikėti pridėti data-asyntai-id atributą per temos pritaikymą.

Alternatyvus metodas 4: Front Matter (Konkretaus puslapio)

Norėdami pridėti pokalbių robotą tik prie konkrečių puslapių:

Pridėkite pasirinktinį parametrą prie puslapio front matter:

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

Savo baseof.html ar dalyje pridėkite sąlyginę logiką:

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

Patarimas: Šis būdas suteikia detalią kontrolę, kuriuose puslapiuose bus pokalbių robotas. Tai naudinga dokumentacijos svetainėms, kur norite valdiklio tik tam tikruose skyriuose.

Alternatyvus metodas 5: Temos išdėstymų perrašymas

Norėdami perrašyti temos išdėstymą nekeičiant temos failų:

Nukopijuokite temos baseof.html iš themes/your-theme/layouts/_default/
Įklijuokite jį į projekto layouts/_default/baseof.html
Pridėkite savo Asyntai įterpimo kodą prieš uždaromąjį </body> žymą
Išsaugokite ir perkurkite svetainę

Svarbu: Kai perrašote temos failus, automatiškai negausite tų failų atnaujinimų, kai tema bus atnaujinta. Šis metodas suteikia pilną kontrolę, bet reikalauja daugiau priežiūros. Apsvarstykite galimybę naudoti dalis lengvesniam temos atnaujinimui.

3 žingsnis: Sukurkite ir įdiekite

Pridėję kodą, sukurkite Hugo svetainę:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Sugeneruota svetainė bus public/ kataloge
Įdiekite šį katalogą savo prieglobos platformoje (Netlify, Vercel, GitHub Pages ir kt.)

Patarimas: Kūrimo metu naudokite hugo server svetainei peržiūrėti lokaliai adresu http://localhost:1313. Pokalbių robotas turėtų atsirasti apatiniame dešiniajame kampe visuose puslapiuose.

4 žingsnis: Patikrinkite diegimą

Įdiegę Hugo svetainę, atidarykite ją naujame naršyklės skirtuke. Turėtumėte matyti pokalbių valdiklio mygtuką apatiniame dešiniajame kampe. Spustelėkite jį, kad įsitikintumėte, jog jis atsidaro ir veikia teisingai.

Nematote valdiklio? Įsitikinkite, kad perkūrėte svetainę su hugo komanda atlikę pakeitimus. Patikrinkite, ar pakeitėte YOUR_WIDGET_ID savo tikruoju valdiklio ID iš valdymo skydelio. Išvalykite naršyklės talpyklą arba peržiūrėkite inkognito režimu. Jei naudojate CDN, gali reikėti panaikinti talpyklą. Atidarykite naršyklės konsolę (F12) ir patikrinkite, ar nėra JavaScript klaidų.

Dokumentacija