Як додати AI чат-бот Asyntai до Hugo

Покрокова інструкція для генератора статичних сайтів Hugo

Платформа:

Крок 1: Отримайте код для вставки

Спочатку перейдiть до вашої Панелi керування Asyntai та прокрутiть вниз до роздiлу "Код для вставки". Скопiюйте унiкальний код для вставки, який виглядатиме так:

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

Примітка: Код вище є лише прикладом. Ви повиннi скопiювати власний унiкальний код для вставки з вашої Панелi керування, оскiльки вiн мiстить ваш особистий ID вiджета.

Крок 2: Додавання коду до часткового шаблону теми (Рекомендовано)

Найкращий спосiб додати чат-бот на всi сторiнки вашого сайту Hugo - створити частковий шаблон:

Перейдiть до каталогу layouts/partials/ вашого проекту Hugo
Створіть новий файл з назвою asyntai-widget.html
Вставте код вбудовування Asyntai у цей файл:

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

Вiдкрийте файл baseof.html вашої теми (зазвичай у layouts/_default/baseof.html)
Додайте частковий шаблон перед закриваючим тегом </body>:

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

Збережіть файл та перезберіть сайт Hugo

Порада: Використання часткових шаблонiв - це рекомендований Hugo спосiб включення багаторазових компонентiв. Цей метод забезпечує появу чат-бота на кожнiй сторiнцi, що використовує шаблон baseof.html, що зазвичай означає всi сторiнки вашого сайту.

Альтернативний метод 1: Додавання до часткового шаблону Head

Якщо ваша тема має частковий шаблон head, ви можете додати код туди:

Знайдiть частковий шаблон head вашої теми (зазвичай layouts/partials/head.html)
Якщо його не iснує, створiть layouts/partials/head.html в коренi вашого проекту
Додайте код вбудовування Asyntai до цього файлу:

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

Переконайтеся, що ваш baseof.html включає цей частковий шаблон у роздiлi <head>:

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

Примітка: Якщо ваша тема вже має частковий шаблон head.html з iснуючим вмiстом, просто додайте свiй код Asyntai до нього. Не замiнюйте iснуючий вмiст.

Альтернативний метод 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 або частковому шаблонi футера перед </body>:

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

Порада: Файли в каталозi static/ копiюються без змiн до кореня вашого опублiкованого сайту. Функцiя relURL генерує правильний вiдносний шлях для вашого розгортання.

Альтернативний метод 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

Примітка: Цей метод працює лише якщо ваша тема пiдтримує параметр customJS. Перевiрте документацiю вашої теми. Вам також може знадобитися додати атрибут data-asyntai-id через налаштування теми.

Альтернативний метод 4: Front Matter (Для конкретної сторінки)

Щоб додати чат-бот лише на конкретні сторінки:

Додайте власний параметр до front matter вашої сторінки:

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

У вашому baseof.html або частковому шаблоні додайте умовну логіку:

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

Порада: Цей пiдхiд надає детальний контроль над тим, якi сторiнки включають чат-бот. Вiн корисний для документацiйних сайтiв, де ви хочете вiджет лише в певних роздiлах.

Альтернативний метод 5: Перевизначення макетів теми

Щоб перевизначити макет вашої теми без зміни файлів теми:

Скопiюйте baseof.html теми з themes/your-theme/layouts/_default/
Вставте його до layouts/_default/baseof.html вашого проекту
Додайте код вбудовування Asyntai перед закриваючим тегом </body>
Збережіть та перезберіть сайт

Важливо: Коли ви перевизначуєте файли теми, ви не будете автоматично отримувати оновлення цих файлiв при оновленнi теми. Цей метод надає повний контроль, але вимагає бiльше обслуговування. Розгляньте використання часткових шаблонiв для легшого оновлення теми.

Крок 3: Збірка та розгортання

Після додавання коду зберіть свій сайт Hugo:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Згенерований сайт буде в каталозі public/
Розгорнiть цей каталог на вашiй хостинг-платформi (Netlify, Vercel, GitHub Pages тощо)

Порада: Пiд час розробки використовуйте hugo server, щоб попередньо переглянути сайт локально за адресою http://localhost:1313. Чат-бот повинен з'явитися в нижньому правому кутi на всiх сторiнках.

Крок 4: Перевірка встановлення

Пiсля розгортання сайту Hugo вiдкрийте його у новiй вкладцi браузера. Ви повиннi побачити кнопку чат-вiджету в нижньому правому кутi. Натиснiть на неї, щоб переконатися, що вона вiдкривається та працює коректно.

Не бачите віджет? Переконайтеся, що ви перезбрали сайт за допомогою команди hugo пiсля внесення змiн. Перевiрте, що ви замiнили YOUR_WIDGET_ID на фактичний ID вiджету з панелi керування. Очистiть кеш браузера або перегляньте в режимi iнкогнiто. Якщо ви використовуєте CDN, може знадобитися iнвалiдацiя кешу. Вiдкрийте консоль браузера (F12), щоб перевiрити наявнiсть помилок JavaScript.

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