Как да добавите Asyntai AI чатбот в 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>

Забележка: Кодът по-горе е само пример. Трябва да копирате собствения си уникален код за вграждане от вашето Табло за управление, тъй като съдържа вашия личен ID на уиджета.

Стъпка 2: Добавете код към partial на темата (Препоръчително)

Най-добрият начин да добавите чатбота към всички страници на вашия Hugo сайт е като създадете partial:

Навигирайте до директорията 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)
Добавете partial преди затварящия таг </body>:

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

Запазете файла и пресъздайте вашия Hugo сайт

Съвет: Използването на partials е препоръчваният от Hugo начин за включване на компоненти за повторна употреба. Този метод гарантира, че чатботът се появява на всяка страница, която използва шаблона baseof.html, което обикновено са всички страници на вашия сайт.

Алтернативен метод 1: Добавете към Head Partial

Ако вашата тема има head partial, можете да добавите кода там:

Намерете head partial на вашата тема (обикновено 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 включва този partial в секцията <head>:

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

Забележка: Ако вашата тема вече има head.html partial със съществуващо съдържание, просто добавете вашия 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 или footer partial преди </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 или partial добавете условна логика:

{{ 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>
Запазете и пресъздайте сайта си

Важно: Когато презаписвате файлове на темата, няма автоматично да получавате актуализации на тези файлове при актуализиране на темата. Този метод ви дава пълен контрол, но изисква повече поддръжка. Помислете за използване на partials вместо това за по-лесни актуализации на темата.

Стъпка 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 с вашия действителен ID на уиджета от таблото за управление. Изчистете кеша на браузъра или разгледайте в инкогнито режим. Ако използвате CDN, може да е необходимо да обезсилите кеша. Отворете конзолата на браузъра (F12), за да проверите за JavaScript грешки.

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