Kā pievienot Asyntai MI tērzēšanas robotu Hugo

Soli pa solim ceļvedis Hugo statisko vietņu ģeneratoram

Platforma:

1. solis: Iegūstiet savu iegulto kodu

Vispirms dodieties uz savu Asyntai vadības paneli un ritiniet uz leju līdz sadaļai "Iegultais kods". Nokopējiet savu unikālo iegulto kodu, kas izskatīsies šādi:

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

Piezīme: Iepriekš minētais kods ir tikai piemērs. Jums jānokopē savs unikālais iegultais kods no sava Vadības paneļa, jo tas satur jūsu personīgo logrīka ID.

2. solis: Koda pievienošana motīva daļējai veidnei (ieteicams)

Labākais veids, kā pievienot tērzēšanas robotu visām jūsu Hugo vietnes lapām, ir izveidot daļējo veidni:

Pārejiet uz sava Hugo projekta direktoriju layouts/partials/
Izveidojiet jaunu failu ar nosaukumu asyntai-widget.html
Ielīmējiet savu Asyntai iegulto kodu šajā failā:

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

Atveriet sava motīva failu baseof.html (parasti layouts/_default/baseof.html)
Pievienojiet daļējo veidni pirms noslēdzošā </body> taga:

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

Saglabājiet failu un pārbūvējiet savu Hugo vietni

Padoms: Daļējo veidņu izmantošana ir Hugo ieteiktais veids atkārtoti lietojamu komponentu iekļaušanai. Šī metode nodrošina, ka tērzēšanas robots parādās katrā lapā, kas izmanto baseof.html veidni, kas parasti ir visas jūsu vietnes lapas.

Alternatīvā metode 1: Pievienot galvenes daļējai veidnei

Ja jūsu motīvam ir galvenes daļējā veidne, kodu var pievienot tur:

Atrodiet sava motīva galvenes daļējo veidni (parasti layouts/partials/head.html)
Ja tā neeksistē, izveidojiet layouts/partials/head.html sava projekta saknē
Pievienojiet savu Asyntai iegulto kodu šim failam:

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

Pārliecinieties, ka jūsu baseof.html iekļauj šo daļējo veidni <head> sadaļā:

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

Piezīme: Ja jūsu motīvam jau ir head.html daļējā veidne ar esošu saturu, vienkārši pievienojiet savu Asyntai kodu tai. Neaizstājiet esošo saturu.

Alternatīvā metode 2: Statiskā mape ar pielāgotu JavaScript

Modulārākai pieejai, izmantojot Hugo statisko mapi:

Pārejiet uz sava Hugo projekta direktoriju static/js/
Izveidojiet direktoriju, ja tā neeksistē
Izveidojiet jaunu failu ar nosaukumu asyntai-loader.js
Pievienojiet šādu kodu logrīka ielādei:

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

Atsaucieties uz šo failu savā baseof.html vai kājenes daļējā veidnē pirms </body>:

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

Padoms: Faili static/ direktorijā tiek kopēti tādi, kādi ir, uz publicētās vietnes sakni. Funkcija relURL ģenerē pareizo relatīvo ceļu jūsu izvietojumam.

Alternatīvā metode 3: Hugo konfigurācija (config.toml/yaml)

Dažiem Hugo motīviem, kas atbalsta pielāgotus skriptus caur konfigurāciju:

# 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

Piezīme: Šī metode darbojas tikai tad, ja jūsu motīvs atbalsta customJS parametru. Pārbaudiet sava motīva dokumentāciju. Var būt nepieciešams pievienot arī atribūtu data-asyntai-id caur motīva pielāgošanu.

Alternatīvā metode 4: Front Matter (lapas specifiska)

Lai pievienotu tērzēšanas robotu tikai konkrētām lapām:

Pievienojiet pielāgotu parametru savas lapas front matter sadaļā:

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

Savā baseof.html vai daļējā veidnē pievienojiet nosacītu loģiku:

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

Padoms: Šī pieeja dod jums detalizētu kontroli pār to, kurās lapās iekļaut tērzēšanas robotu. Tā ir noderīga dokumentācijas vietnēm, kur vēlaties logrīku tikai noteiktās sadaļās.

Alternatīvā metode 5: Motīva izkārtojumu pārrakstīšana

Lai pārrakstītu sava motīva izkārtojumu, nemodificējot motīva failus:

Nokopējiet motīva baseof.html no themes/your-theme/layouts/_default/
Ielīmējiet to sava projekta layouts/_default/baseof.html
Pievienojiet savu Asyntai iegulto kodu pirms noslēdzošā </body> taga
Saglabājiet un pārbūvējiet savu vietni

Svarīgi: Pārrakstot motīva failus, jūs automātiski nesaņemsiet atjauninājumus šiem failiem, kad motīvs tiks atjaunināts. Šī metode dod pilnu kontroli, bet prasa vairāk uzturēšanas. Apsveriet daļējo veidņu izmantošanu vienkāršākiem motīva atjauninājumiem.

3. solis: Būvējiet un izvietojiet

Pēc koda pievienošanas būvējiet savu Hugo vietni:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Ģenerētā vietne būs direktorijā public/
Izvietojiet šo direktoriju savā hostinga platformā (Netlify, Vercel, GitHub Pages utt.)

Padoms: Izstrādes laikā izmantojiet hugo server, lai priekšskatītu savu vietni lokāli http://localhost:1313. Tērzēšanas robotam vajadzētu parādīties apakšējā labajā stūrī visās lapās.

4. solis: Pārbaudiet instalēšanu

Pēc Hugo vietnes izvietošanas atveriet to jaunā pārlūkprogrammas cilnē. Jums vajadzētu redzēt tērzēšanas logrīka pogu apakšējā labajā stūrī. Noklikšķiniet uz tās, lai pārliecinātos, ka tā atveras un darbojas pareizi.

Neredzat logrīku? Pārliecinieties, ka pārbūvējāt savu vietni ar komandu hugo pēc izmaiņu veikšanas. Pārbaudiet, vai aizstājāt YOUR_WIDGET_ID ar savu reālo logrīka ID no vadības paneļa. Notīriet pārlūkprogrammas kešatmiņu vai skatiet inkognito režīmā. Ja izmantojat CDN, var būt nepieciešams anulēt kešatmiņu. Atveriet pārlūkprogrammas konsoli (F12), lai pārbaudītu JavaScript kļūdas.

Dokumentācija