Kako dodati klepetalnik Asyntai z UI v Grav

Vodič po korakih za Grav CMS

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 v predlogo teme Grav (priporočeno)

Najboljši način za dodajanje klepetalnika na vse strani vaše strani Grav je urejanje osnovne predloge Twig vaše teme:

Pojdite v imenik user/themes/yourtheme/templates/ svojega projekta Grav in odprite default.html.twig (ali osnovno predlogo, ki jo uporablja vaša tema)
Dodajte svojo vdelovalno kodo Asyntai pred zaključno oznako </body>:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Shranite datoteko

Nasvet: Grav uporablja Twig kot svoj mehanizem predlog. Osnovna predloga je običajno default.html.twig ali partials/base.html.twig glede na vašo temo. Preverite strukturo svoje teme, da poiščete pravilno datoteko, ki vsebuje zaključno oznako </body>.

Alternativni način 1: Uporaba upravljalnika sredstev Grav

Vgrajeni upravljalnik sredstev Grav zagotavlja čist način za dodajanje sredstev JavaScript prek Twig:

Odprite osnovno predlogo Twig svoje teme (npr. user/themes/yourtheme/templates/partials/base.html.twig)
Uporabite upravljalnik sredstev za dodajanje JavaScripta:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

Ali dodajte vstavljen JavaScript za dinamično ustvarjanje elementa script v svoji osnovni predlogi:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(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.body.appendChild(script);
})();
</script>
</body>
</html>

Opomba: Način z upravljalnikom sredstev je pristop, ki ga Grav priporoča za upravljanje sredstev JavaScript. Zagotavlja vgrajeno podporo za cevovodenje, razvrščanje in združevanje sredstev.

Alternativni način 2: Uporaba vtičnika Custom JS

Če imate raje pristop z vtičnikom brez urejanja datotek teme:

Namestite vtičnik "Custom JS" prek skrbniške plošče Grav ali prek CLI:

bin/gpm install custom-js

Pojdite na Skrbnik > Vtičniki > Custom JS
Dodajte kodo vdelovalnega skripta:

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

Shranite konfiguracijo vtičnika

Nasvet: Uporaba vtičnika za vstavljanje skriptov pomeni, da vam ni treba spreminjati nobenih datotek teme. To olajša menjavo ali posodabljanje tem brez izgube integracije klepetalnika.

Alternativni način 3: Uporaba preglasitve bloka v podrejeni predlogi

Če vaša tema Grav uporablja dedovanje blokov Twig, lahko preglasite spodnji blok v podrejeni predlogi:

{% block bottom %}
    {{ parent() }}
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}

Ustvarite ali odprite podrejeno predlogo, ki razširja osnovno predlogo vaše teme
Dodajte preglasitev bloka, prikazano zgoraj
Klic parent() zagotavlja, da je vsa obstoječa vsebina v bloku ohranjena

Opomba: Ta način uporablja sistem dedovanja predlog Twig. Prepričajte se, da se ime bloka (npr. bottom) ujema z blokom, definiranim v osnovni predlogi vaše teme. Pogosta imena blokov vključujejo bottom, javascripts ali footer.

Alternativni način 4: Uporaba vtičnika Custom Head za Grav

Še ena možnost z vtičnikom je vtičnik Custom Head:

Namestite vtičnik custom-head prek ukazne vrstice ali skrbniške plošče:

bin/gpm install custom-head

Pojdite na Skrbnik > Vtičniki > Custom Head
Dodajte kodo vdelovalnega skripta Asyntai v konfiguracijo vtičnika:

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

Shranite konfiguracijo

Nasvet: Vtičnik Custom Head omogoča vstavljanje kode v razdelke glave ali telesa vaše strani brez poseganja v datoteke teme. Preverite dokumentacijo vtičnika za pravilno možnost umestitve za vstavljanje skripta pred zaključno oznako </body>.

Korak 3: Počistite predpomnilnik in preverite

Po dodajanju kode počistite predpomnilnik Grav in preverite namestitev:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

Odprite svojo stran Grav 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čistili predpomnilnik Grav z bin/grav clearcache ali s skrbniške plošče. 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. Odprite konzolo brskalnika (F12), da preverite morebitne napake JavaScript. Preverite, ali je skript prisoten v izvoru strani z desnim klikom in izbiro "Prikaži izvorno kodo strani".

Dokumentacija

Kako dodati klepetalnik Asyntai z UI v Grav

Korak 1: Pridobite svojo vdelovalno kodo

Korak 2: Dodajte v predlogo teme Grav (priporočeno)

Alternativni način 1: Uporaba upravljalnika sredstev Grav

Alternativni način 2: Uporaba vtičnika Custom JS

Alternativni način 3: Uporaba preglasitve bloka v podrejeni predlogi

Alternativni način 4: Uporaba vtičnika Custom Head za Grav

Korak 3: Počistite predpomnilnik in preverite