Како додати Asyntai АИ четбот у Hugo

Водич корак по корак за Hugo генератор статичких сајтова

Платформа:

Корак 1: Набавите свој код за уграђивање

Прво, идите на своју Asyntai контролну таблу и померите се до одељка „Код за уграђивање". Копирајте свој јединствени код за уграђивање који ће изгледати овако:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Напомена: Код изнад је само пример. Морате копирати свој јединствени код за уграђивање са своје Контролне табле јер садржи ваш лични ИД виџета.

Корак 2: Додајте код у парцијални шаблон теме (препоручено)

Најбољи начин за додавање четбота на све странице вашег Hugo сајта је креирањем парцијалног шаблона:

Навигирајте до директоријума layouts/partials/ вашег Hugo пројекта
Креирајте нови фајл под називом asyntai-widget.html
Налепите свој Asyntai код за уграђивање у овај фајл:

<!-- layouts/partials/asyntai-widget.html -->
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Отворите baseof.html фајл теме (обично у layouts/_default/baseof.html)
Додајте парцијални шаблон пре затварајуће </body> ознаке:

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

Сачувајте фајл и поново изградите свој Hugo сајт

Савет: Коришћење парцијалних шаблона је начин који Hugo препоручује за укључивање компоненти за поновну употребу. Овај метод осигурава да се четбот појављује на свакој страници која користи baseof.html шаблон, а то су обично све странице сајта.

Алтернативни метод 1: Додајте у парцијални шаблон заглавља

Ако ваша тема има парцијални шаблон заглавља, можете тамо додати код:

Пронађите парцијални шаблон заглавља теме (обично layouts/partials/head.html)
Ако не постоји, креирајте layouts/partials/head.html у корену пројекта
Додајте свој Asyntai код за уграђивање у овај фајл:

<!-- layouts/partials/head.html -->
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Уверите се да ваш baseof.html укључује овај парцијални шаблон у <head> одељку:

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

Напомена: Ако ваша тема већ има head.html парцијални шаблон са постојећим садржајем, једноставно додајте свој Asyntai код на крај. Не замењујте постојећи садржај.

Алтернативни метод 2: Статичка фасцикла са прилагођеним JavaScript-ом

За модуларнији приступ коришћењем Hugo статичке фасцикле:

Навигирајте до директоријума static/js/ вашег Hugo пројекта
Креирајте директоријум ако не постоји
Креирајте нови фајл под називом asyntai-loader.js
Додајте следећи код за учитавање виџета:

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

Референцирајте овај фајл у свом baseof.html или парцијалном шаблону подножја пре </body>:

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

Савет: Фајлови у static/ директоријуму се копирају без измена у корен вашег објављеног сајта. relURL функција генерише тачну релативну путању за ваш деплојмент.

Алтернативни метод 3: Hugo конфигурација (config.toml/yaml)

За неке Hugo теме које подржавају прилагођене скрипте путем конфигурације:

# 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

Напомена: Овај метод ради само ако ваша тема подржава customJS параметар. Проверите документацију теме. Можда ћете такође морати да додате data-asyntai-id атрибут кроз прилагођавање теме.

Алтернативни метод 4: Front Matter (за одређену страницу)

За додавање четбота само на одређене странице:

Додајте прилагођени параметар у front matter странице:

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

У свом baseof.html или парцијалном шаблону, додајте условну логику:

{{ if .Params.asyntaiWidget }}
  <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
{{ end }}

Савет: Овај приступ вам даје детаљну контролу над тим које странице укључују четбот. Корисно је за сајтове документације где желите виџет само на одређеним одељцима.

Алтернативни метод 5: Преписивање распореда теме

За преписивање распореда теме без мењања фајлова теме:

Копирајте baseof.html теме из themes/your-theme/layouts/_default/
Налепите га у layouts/_default/baseof.html свог пројекта
Додајте свој Asyntai код за уграђивање пре затварајуће </body> ознаке
Сачувајте и поново изградите свој сајт

Важно: Када преписујете фајлове теме, нећете аутоматски примати ажурирања тих фајлова када се тема ажурира. Овај метод вам даје потпуну контролу, али захтева више одржавања. Размислите о коришћењу парцијалних шаблона за лакша ажурирања теме.

Корак 3: Изградите и деплојујте

Након додавања кода, изградите свој Hugo сајт:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Генерисани сајт ће бити у public/ директоријуму
Деплојујте овај директоријум на своју хостинг платформу (Netlify, Vercel, GitHub Pages итд.)

Савет: Током развоја, користите hugo server да локално прегледате сајт на http://localhost:1313. Четбот би требало да се појави у доњем десном углу на свим страницама.

Корак 4: Верификујте инсталацију

Након деплојмента Hugo сајта, отворите га у новој картици претраживача. Требало би да видите дугме виџета за ћаскање у доњем десном углу. Кликните на њега да бисте се уверили да се отвара и функционише исправно.

Не видите виџет? Уверите се да сте поново изградили сајт помоћу hugo команде након извршавања промена. Проверите да сте заменили YOUR_WIDGET_ID стварним ИД-ом виџета са контролне табле. Обришите кеш претраживача или прегледајте у инкогнито режиму. Ако користите CDN, можда ћете морати да поништите кеш. Отворите конзолу претраживача (F12) да проверите да ли има JavaScript грешака.

Документација