Kako dodati klepetalnik Asyntai z UI v Hugo

Vodič po korakih za generator statičnih strani Hugo

Platforma:

Korak 1: Pridobite svojo vdelovalno kodo

Najprej pojdite na svojo Nadzorno ploščo Asyntai in se pomaknite navzdol do razdelka "Vdelovalna koda". Kopirajte svojo edinstveno vdelovalno kodo, ki bo videti takole:

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

Opomba: Zgornja koda je le primer. Svojo edinstveno vdelovalno kodo morate kopirati iz svoje Nadzorne plošče, saj vsebuje vaš osebni ID klepetalnika.

Korak 2: Dodajte kodo v delni odsek teme (priporočeno)

Najboljši način za dodajanje klepetalnika na vse strani vaše strani Hugo je z ustvarjanjem delnega odseka:

Pojdite v imenik layouts/partials/ svojega projekta Hugo
Ustvarite novo datoteko z imenom asyntai-widget.html
Prilepite svojo vdelovalno kodo Asyntai v to datoteko:

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

Odprite datoteko baseof.html svoje teme (običajno v layouts/_default/baseof.html)
Dodajte delni odsek pred zaključno oznako </body>:

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

Shranite datoteko in znova zgradite svojo stran Hugo

Nasvet: Uporaba delnih odsekov je način, ki ga Hugo priporoča za vključevanje komponent za večkratno uporabo. Ta način zagotavlja, da se klepetalnik prikaže na vsaki strani, ki uporablja predlogo baseof.html, kar so običajno vse strani vašega mesta.

Alternativni način 1: Dodajte v delni odsek glave

Če ima vaša tema delni odsek glave, lahko kodo dodate tja:

Poiščite delni odsek glave svoje teme (običajno layouts/partials/head.html)
Če ne obstaja, ustvarite layouts/partials/head.html v korenu projekta
Dodajte svojo vdelovalno kodo Asyntai v to datoteko:

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

Prepričajte se, da vaša datoteka baseof.html vključuje ta delni odsek v razdelku <head>:

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

Opomba: Če vaša tema že ima delni odsek head.html z obstoječo vsebino, preprosto dodajte svojo kodo Asyntai na konec. Ne zamenjujte obstoječe vsebine.

Alternativni način 2: Statična mapa z JavaScriptom po meri

Za bolj modularen pristop z uporabo statične mape Hugo:

Pojdite v imenik static/js/ svojega projekta Hugo
Ustvarite imenik, če ne obstaja
Ustvarite novo datoteko z imenom asyntai-loader.js
Dodajte naslednjo kodo za nalaganje klepetalnika:

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

Sklicujte se na to datoteko v svoji datoteki baseof.html ali delnem odseku noge pred </body>:

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

Nasvet: Datoteke v imeniku static/ se kopirajo nespremenjene v koren objavljene strani. Funkcija relURL ustvari pravilno relativno pot za vašo namestitev.

Alternativni način 3: Konfiguracija Hugo (config.toml/yaml)

Za nekatere teme Hugo, ki podpirajo skripte po meri prek konfiguracije:

# 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

Opomba: Ta način deluje le, če vaša tema podpira parameter customJS. Preverite dokumentacijo svoje teme. Morda boste morali dodati tudi atribut data-asyntai-id prek prilagoditve teme.

Alternativni način 4: Uvodni podatki (za določeno stran)

Za dodajanje klepetalnika le na določene strani:

Dodajte parameter po meri v uvodne podatke strani:

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

V svoji datoteki baseof.html ali delnem odseku dodajte pogojno logiko:

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

Nasvet: Ta pristop vam daje natančen nadzor nad tem, katere strani vključujejo klepetalnik. Uporaben je za dokumentacijske strani, kjer želite klepetalnik le na določenih razdelkih.

Alternativni način 5: Preglasitev postavitev teme

Za preglasitev postavitve teme brez spreminjanja datotek teme:

Kopirajte datoteko baseof.html teme iz themes/your-theme/layouts/_default/
Prilepite jo v layouts/_default/baseof.html svojega projekta
Dodajte svojo vdelovalno kodo Asyntai pred zaključno oznako </body>
Shranite in znova zgradite svojo stran

Pomembno: Ko preglasite datoteke teme, ne boste samodejno prejemali posodobitev teh datotek ob posodobitvi teme. Ta način vam daje popoln nadzor, vendar zahteva več vzdrževanja. Za lažje posodobitve teme razmislite o uporabi delnih odsekov.

Korak 3: Zgradite in namestite

Po dodajanju kode zgradite svojo stran Hugo:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Ustvarjena stran bo v imeniku public/
Namestite ta imenik na svojo gostovalno platformo (Netlify, Vercel, GitHub Pages itd.)

Nasvet: Med razvojem uporabite hugo server za lokalni predogled strani na http://localhost:1313. Klepetalnik bi se moral prikazati v spodnjem desnem kotu na vseh straneh.

Korak 4: Preverite namestitev

Po namestitvi svoje strani Hugo jo odprite v novem zavihku brskalnika. V spodnjem desnem kotu bi morali videti gumb klepetalnika. Kliknite ga, da preverite, ali se pravilno odpre in deluje.

Ne vidite klepetalnika? Prepričajte se, da ste po spremembah znova zgradili svojo stran z ukazom hugo. Preverite, ali ste zamenjali YOUR_WIDGET_ID s svojim dejanskim ID-jem klepetalnika z nadzorne plošče. Počistite predpomnilnik brskalnika ali si oglejte stran v načinu brez beleženja. Če uporabljate CDN, boste morda morali razveljaviti predpomnilnik. Odprite konzolo brskalnika (F12), da preverite morebitne napake JavaScript.

Dokumentacija